Draft-js: Empty line on adding atomic block

[alexeygolev]

It's not an issue per se and it's probably by design but I was wondering why adding an atomic block on the first line would leave this line empty and create the block on the next line. This makes it impossible to add media as the first block in the editor. I checked the Notes app and it has the same behaviour so I guess the code example is not really needed.

[hellendag]

The main reason is that managing selection around media blocks was a pain. :) Since I didn't have a good way to "select" the atomic block or force a new block above it, my workaround was to always include a block above the inserted media.

If you really want to eliminate that and you have a good solution in your UI to insert a block above the atomic block, you could use Modifier to strip the block out before passing the EditorState back to your top-level component.

Ideally, the work that @ianstormtaylor and others are doing will help establish good patterns or APIs for selectable atomic blocks. With this, we could get rid of this workaround and allow the developer to manage selection, cursor behavior, and insertion.

Sorry not to have a better answer for this yet! :)

[lostpebble]

This is still something that I'm struggling to figure out properly. I've been trying to add atomic blocks, but there is always a space before and after them.

There is no way for me to remove those spaces without deleting the atomic block if the block is on the edge of the editor, and even when they are not on the edge and I'd like to just delete those empty spaces to move text closer to my atomic block (lets say the block is an image) - the atomic block gets deleted unless I place the cursor on that empty line and press the delete key (for the bottom space).

If I ever want two atomic blocks to sit one on top of the other, its pretty much impossible with the way the editor is now - and I haven't found the SelectionState and Modified APIs very intuitive to learn, but I'm giving them a shot.

I feel like there should be an easy way to make atomic blocks undeletable within the editor - and then do an intentional delete on them with their key or something when you would like to, because currently the editing experience while using them is very fickle and it feels a little hacky trying to format the content the way I'd like (and especially for users who don't know all the tricks I can't imagine how frustrating they might find it).

[parris]

I'm going to bump this topic. Does anyone have ideas/strategies about how to add new blocks after existing blocks when there are no new lines?

[robbertbrak]

Perhaps you can get some inspiration from DraftJS Plugins? The focus plugin shows a nice way of interacting with atomic blocks.

This suggests a way of inserting new atomic blocks after existing ones when there are no new lines: the user focuses the atomic block and can then insert a new atomic block (e.g. by pressing a toolbar button) after it.

As for inserting new (non-atomic) blocks before, between or after atomic blocks, we use the following strategy:

• If there are two atomic blocks in succession, focus the first one and press the enter key to insert an empty paragraph between the blocks.
• If the first block in the editor is atomic, focus it and press the up arrow to insert an empty paragraph before it.
• If the last block in the editor is atomic, focus it and press the down arrow (or enter key) to insert an empty paragraph after it.

Does that help?

[parris]

@robbertbrak yea thanks! Great example plugin and the strategy was helpful too.

[lukephills]

If there are two atomic blocks in succession, focus the first one and press the enter key to insert an empty paragraph between the blocks.

@robbertbrak In the example focusing the coloured block and pressing enter breaks the editor.

[robbertbrak]

@lukephills I should mention that we are (in our project) not using Draft Plugins. So the strategy I outlined is how _we_ deal with atomic blocks, not how Draft Plugins does it.

[sandywk]

Are there any available solutions now?

[daryn-k]

After entire 3 years no improvements so far, lol

[SyMind]

lol, 4 years ago.

[chshouyu]

lol, almost 5 years ago.