springload / draftail

📝🍸 A configurable rich text editor built with Draft.js

Home Page:https://www.draftail.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Support atomic blocks (images, embeds, hr, etc) without wrapper text blocks

thibaudcolas opened this issue · comments

Feature. At the moment, atomic blocks always have to be preceded and followed by text blocks so focus can move before/after the non-contenteditable atomic blocks. This is done by Draft.js by design, and is documented for Draftail as such:

  • Atomic blocks (images, embeds, hr) are always preceded and followed by a block (empty if no other block is present). See facebook/draft-js#327.

I know a lot of people are confused / annoyed by this, so it would be nice to figure out whether it's possible to support atomic blocks without those "wrapper" blocks for focus management.


Changing this would require implementing custom focus management for those blocks, which is no easy task. We would need ways to:

  • Position the cursor above the atomic block, when it is the first block in the editor.
  • Position the cursor between successive atomic blocks.
  • Position the cursor below the atomic block, when it is the last block in the editor.
  • Focus the atomic block only.
  • Extend focus above the atomic block, starting below.
  • Extend focus below the atomic block, starting above.

I'm not willing to work on this at the moment, but at least this issue can track those discussions, and if anyone else is willing to spend time exploring this I'm happy to help.

#171 introduces a "focus" plugin example, which can be leveraged for this. It would be nice to have it built-in though, if possible (to be considered).