Can't input tabs in civet.dev/playground

[unlessgames]

Playground's text editor (and the ones in the Reference section) lose focus when pressing tab making it hard to input indentation and playing with civet on the site.

Tested on Chromium.

[edemaine]

The tricky part is preserving accessibility to someone without a mouse.

I think we discussed this on Discord and one natural approach is:

• Tab key inserts tab if the editor has focus
• Escape key removes that focus

I'm not quite sure how you get focus in the first place, via keyboard navigation... Maybe you have to push enter after tabbing to the editor? It'd be weird to be tabbing through and then you end up inserting tabs...

[unlessgames]

That could work with some tooltip/overlay that becomes visible when an editor is focused that says "press enter to edit", maybe just the existing one on the reference page with the "edit inline or..." could be it?

Currently the first tab press starts editing and a second highlights the editor, this would make it so that tabbing alone would never start editing which could streamline keyboard navigation on the reference page as well.

Alternatively, it could start editing if the user inserted/removed any character when an editor is highlighted (escape would still quit editing). This is essentially the same as enter starting but it works with other inputs as well and might be usable and intuitive without a hint. In most cases users would typically insert a new line before inserting tabs anyways.