Using this question How to map a key TAB within a text area I tried to write onTab event this way
_onTab(e) {
e.preventDefault();
const maxDepth = 4;
this.onChange(RichUtils.onTab(e, this.state.editorState, maxDepth));
}
...
<div className={className} onClick={this.focus} >
<Editor
ref={this.setDomEditorRef}
onTab={this.onTab}
blockStyleFn={getBlockStyle}
customStyleMap={styleMap}
editorState={editorState}
handleKeyCommand={this.handleKeyCommand}
plugins={[styleToPropsPlugin]}
onChange={this.onChange}
placeholder="..."
spellCheck={true}
/>
</div>
This code doesn't work with TAB key. I tried to do it another way
_mapKeyToEditorCommand(e) {
if (e.keyCode === 9 /* TAB */) {
e.preventDefault()
const newEditorState = RichUtils.onTab(
this.state.editorState,
4, /* maxDepth */
);
if (newEditorState !== this.state.editorState) {
this.onChange(newEditorState);
}
return;
}
return getDefaultKeyBinding(e);
}
...
<div className={className} onClick={this.focus} >
<Editor
ref={this.setDomEditorRef}
onTab={this.mapKeyToEditorCommand}
blockStyleFn={getBlockStyle}
customStyleMap={styleMap}
editorState={editorState}
handleKeyCommand={this.handleKeyCommand}
onChange={this.onChange}
plugins={[styleToPropsPlugin]}
placeholder="..."
spellCheck={true}
/>
</div>
0 effect. Even when I delete this line in Editor field
onTab={this.mapKeyToEditorCommand}
My editor is just not using any of the code that I wrote to map TAB key. I know it recognises that I am clicking TAB, with this line of code
onTab={this._mapKeyToEditorCommand}
It throws an error only after I press TAB. I can't really find any solution, onFocus and onTab are just not working with TAB key in browser for me. When I click TAB I dont want browser to switch focus, I want it to insert a TAB character (/t) in a text field, like in this editor https://texteditor.co/. So I know this is possible.