Block-type changes can affect adjacent sibling block

[gscottolson]

Repro:

• Navigate to the Draft.js homepage
• Add a few blocks of text
• Triple-click a block of text
  • This will select the entire block
• Change the block type to H1

Expected:

• The block type for the selected line changes to a heading

Actual:

• The block type for the selected line and the following line changes to a heading

As I typed this bug with Github Markdown editor, I noticed it also demonstrates this behavior (triple-clicking a line and applying bold will drop the trailing ** at the beginning of the next line). Maybe this is out of the hands of Draft. However, I do believe that fixing the issue would lead to more reasonable UX.

[gscottolson]

I should also add…

Killer work on this project, team. I have been exploring contentEditable-n-React solutions for a few weeks now. This project is a huge leap forward. Thanks for sharing it!

[hellendag]

Thanks @gscottolson!

I think the problem here is that the SelectionState is wrapping into the next line, and probably looks something like:

SelectionState {
  anchorKey: 'a',
  anchorOffset: 0,
  focusKey: 'b',
  focusOffset: 0,
  ...
}

One option would be to change getDraftEditorSelectionWithNodes to be more aware of this possibility and normalize the DOM selection to a SelectionState that just includes block a. Another would be to make block-type and inline-style changes not apply to the second block, within modifier code.

I'm thinking the first option might be a little cleaner, though it means that there would be no state distinction between selecting an entire line of text and selection the text plus the newline. Given that we pretty much ignore the newline as content, though, that might be fine.

What do you think?

[gscottolson]

I think the first solution seems reasonable. Thanks for the quick reply.

FWIW, Facebook Notes does not exhibit this behavior. How is this selection case handled in that product?

Edit: You are right about Notes.

[hellendag]

Looks like Notes does have this problem. :)

[gscottolson]

Excellent. Thanks for the quick fix! 🎩