Improvements to the editor with multiple roots example and guide

[oleq]

A follow–up of

• Docs: Multiple root editor sample and tutorial added #1586 (comment)
• Docs: Multiple root editor sample and tutorial added #1586 (comment).

cc @pjasiun @f1ames

As for #1586 (comment)

If you want to change it, that's fine, but TBH I like it this way. It stresses the fact that this is a single editor.

The user does not care what's underneath. They navigate and fill the text in a form and the expect things to behave like a form. They focus one field at a time and they expect just a single field to be visually focused.

Besides, this way it's very hard to tell which editable (form field) is focused (Where's my caret? Am I typing the email address or the message yet?).

[pjasiun]

It is fine for me to focus one element. But to clarify what I meant:

The user does not care what's underneath.

I believe that there was a reason why it was created as a single multi-root editor, not by multiple separated editor. And I believe that the reason was to provide the single-editor experience. This is why I suggest that the editor should act like this - like a single editor.

Besides, this way it's very hard to tell which editable (form field) is focused (Where's my caret? Am I typing the email address or the message yet?).

That's a good point, in fact.

[oleq]

Anyway, check out screencasts in #1600 (comment).

[oleq]

I'd give the toolbar some space because now it looks like it belongs to the first root only

WDYT?

[Reinmar]

Isn't this ticket a DUP of #1596 (or vice versa)?

[oleq]

This one is a DUP but since there's a lot going on here already, I marked the other one as DUP.