Small example of tabbable Ace editors that don't capture page navigation tabs.
See an example on github pages.
Sites can be tabbed through normally. However, whenever a react-ace component is interacted with either by clicking on it or typing while the editor is focused, tabs will then indent or dedent the code. This can be escaped by clicking off the editor or by pressing the escape key at which point tabs can be used to navigate the page.
The modified editor component is in src/CodeEditor.js
. This is just a
wrapper around an AceEditor
that activates and disables the tab
command
handlers. Feel free to take inspiration from this and use/modify it in your
own projects.
This project was inspired by behaviour described by Tim Hunt in a github issue on the ace editor github.
For an example of this behaviour out in the wild, see this python textbook site from this repository.