Inline style override is not preserved when rich text editor focus is lost

[barklund]

Bug Description

This is a tricky one to even understand and will probably only impact very few users.

When nothing is selected, but cursor is visible and focus is inside an editable text field, some custom styling can be applied. If you for instance inside a non-bold word press cmd+b and then start typing, your text will come out as bold.

This is in draft-js lingo known as the local "style override" for the current collapsed selection. As soon as you change focus or selection, this style override is lost. E.g if you put the cursor inside a non-bold word, press cmd+b, and then press then left arrow and start typing, your characters will come out non-bold, as the local style override is lost as soon as you move the selection (cursor).

However, this (losing style override on selection change) also happens when the entire text field loses focus. If you as before put the cursor inside a non-bold word, press cmd+b, and then click somewhere in the design panel, the text editor loses focus and any inline style override is lost.

You can apply inline style override by clicking the buttons in the design panel though - e.g inside a non-bold word you can click the button for bold in the design panel and start typing in bold. This works.

If you however then also click another thing in the design panel, e.g. the button for underline, the previous style override for bold is lost as the editor briefly loses focus. Now only the style override for underline will be in effect. This is also the case for selecting font weight in drop down or text color in color picker.

To fix this, one needs to remember local style override on blur in the editor and reapply style override on focus as long as the selection hasn't changed.

This is a known consequence of #1323.

Expected Behaviour

• Style overrides should be remembered when editor loses focus.

Steps to Reproduce

• Add a new text field
• Put the cursor inside a non-bold, non-italic word
• Click the button for bold in the design pane
• Click the button for italic in the design panel
• Start typing in the text field (focus should automatically have returned there)
• Observer that the new text is only italic, not bold

Screenshots

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance Criteria

QA Instructions