Rendering view document after focusing

[szymonkups]

View document is rendered after each blur event but not after each focus. This means that if selection is placed in the exact same place (without selection change event) document will not be re-rendered:

Nested ediable updates its CSS class after being focused but it is not re-rendered so the blue outline is not showing when selection is placed in the exact same place.

I've tried to test if adding viewDocument.render() to FocusObserver on focus event helps with this but unfortunately it is not working as expected. I think following things are happening when focusing nested editable:

• DOM element is focused, FocusObserver sets viewDocument.isFocused to true,
• render() method is called, view elements are rendered,
• old selection from view is rendered into DOM
• there is no selection change event with selection placed inside nested editable.

It looks like rendering on each focus event (which is fired when nested editable is focused) will not allow to put selection inside nested editable (because it will be rendered back to its position from view selection).

Any ideas how to solve it?

[pjasiun]

That's because for some strange reason there is no render() call in the SelectionObserver anymore. It's observers role to re-render DOM if DOM changes and there is no change event from the model.

In this case, it would be perfect to call render on focus. It's focus, what changes, so it is FocusObserver who should re-render DOM.

Unfortunately, the selection change event is fired asynchronously. It means that if we re-render DOM synchronously after the focus change we will overwrite the DOM selection with the View selection, before the native DOM selection change event is fired, so before we update the view selection.

In my opinion, there are 2 things to do.

1. Selection Observer has to call render if there is no change event. It was most probably removed because of the infinite loop protection, but this should be handled in a different way.

2. Since, in this case, selection does not change, the Selection Observer may see no good reason to render. As I said it's focus observer role to ensure that render is called, in this case. It should wait for the next DOM selection change event, to prevent premature rendering and call render in the proper moment (does not matter if it was called by selection observer or not).

Note that it's renderer who should compare DOM and view and do nothing if there is no good reason to render anything. Observers should be free to call render whenever the feel that something may need the update.

[Reinmar]

Small change after F2F talk with @pjasiun:

1. Focus observer should somehow trigger selection observer. See how selection observer triggers the mutation observer. Selection observer could have the same kind of method (i.e. flush()) which would update model selection (do _handleSelectionChange()).
2. Both observers should call render().

Regarding 1 – we can consider change the flush() to better name.

Regarding 2 – I wouldn't touch the sel obs now because it's a separate issue (not needed for this issue) and it may be really tricky. @pjasiun is reporting a separate ticket for that.

[pjasiun]

Agree. See https://github.com/ckeditor/ckeditor5-engine/issues/796.