Skip to content

feat: make all editor blocks draggable#134

Merged
sergioramos merged 16 commits into
mainfrom
editor-improvements
Jun 13, 2023
Merged

feat: make all editor blocks draggable#134
sergioramos merged 16 commits into
mainfrom
editor-improvements

Conversation

@sehyod

@sehyod sehyod commented Jun 9, 2023

Copy link
Copy Markdown
Collaborator

Fixes #133

Root document can now only contain draggable blocks. A draggable block is a wrapper for any block, thats adds a handle on the left:

  • the handle only appear on hover
  • clicking on the handle selects the block
  • the handle always appear when the block is selected

This also adds rules when pressing enter:

  • when the cursor is at the end of block, create an empty draggable block after
  • when the cursor is in a block, split it in 2 draggable blocks
  • if some content is selected, removes it, then split in 2 draggable blocks
    These rules were what felt the most natural to me, but if you feel like anything seems weird when playing around with it, please let me know.

Note: This PR does not change the behaviour of blocks, which means that collapsible blocks are still hard to work with (no proper way to create a collapsible block, pressing Enter doesn't work, ...) and bullet points list are considered a whole block, which means you can only drag and drop the whole list. These components will be reworked in future PRs

image

@sehyod sehyod requested a review from cguedes June 9, 2023 14:04
@cguedes

cguedes commented Jun 12, 2023

Copy link
Copy Markdown
Collaborator

@sehyod found this bug working this lists

g65Yjff0PD

@sehyod

sehyod commented Jun 12, 2023

Copy link
Copy Markdown
Collaborator Author

@sehyod found this bug working this lists

g65Yjff0PD

Thanks for the catch! But to fix this, the best way would be to extend the List component to add custom behaviour, so I think it would be better to do it in another PR. That's actually the same with collapsible blocks: if you try to press Enter inside a collapsible block with the code of this PR, the result will be very buggy

cguedes
cguedes previously approved these changes Jun 12, 2023
Comment thread src/TipTapEditor/DraggableBlock/DraggableBlockNode.ts Outdated
Comment thread src/TipTapEditor/DraggableBlock/DraggableBlockNode.ts
@sergioramos sergioramos changed the title feat: make all blocks draggable in the editor feat: make all editor blocks draggable Jun 13, 2023
@sergioramos sergioramos merged commit 699b9ce into main Jun 13, 2023
@sergioramos sergioramos deleted the editor-improvements branch June 13, 2023 09:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Make all blocks draggable

3 participants