In <PROJECT_NAME> we are facing the problem that a mention shown bold and green, can be edited in the way that parts of its text can be deleted, like if it is not a single token/entity (as in Widget Showcase) but just a number of characters.
Does anyone have experience on how Draft-JS handles the deletion of text? I can tell, that the the time onChange handler is activated, the Editor-State has already changed in the sense that the deletion took already place.
In ([Widget-Showcase]<INTERNAL_LINK>, when you try to delete the mention in the editor, the whole mention is removed. In contrast, in <PROJECT_NAME> we would just delete characters of the mention text, not the mention itself.
Hi @bjoern-quantum-vale,
You can handle the keyboard event of the editor by using keyBindingFn and handleKeyCommand.
Take a look at the code below:
export class MentionPluginEditor extends React.Component<{}, { editorState: EditorState, suggestions: Mention[] }> {
constructor(props: {}) {
super(props);
this.state = {
editorState: EditorState.createEmpty(),
suggestions: mentionSuggestions
};
}
private keyBindingFn = (event: React.KeyboardEvent<{}>): DraftEditorCommand | string | null => {
if (event.keyCode === Key.Backspace) {
// return the command
return "backspace";
}
return null;
}
private handleKeyCommand = (command: string, editorState: EditorState): DraftHandleValue => {
if (command === "backspace") {
// Change editor state here
}
return "not-handled";
}
render() {
return (
<div>
<Editor
editorState={this.state.editorState}
onChange={editorState => this.onChange(editorState)}
plugins={[mentionPlugin]}
placeholder="Enter @ character"
keyBindingFn={this.keyBindingFn}
handleKeyCommand={this.handleKeyCommand}
/>
<MentionSuggestions
suggestions={this.state.suggestions}
onSearchChange={this.onSearchChange}
/>
</div>
);
}
onChange(editorState: EditorState): void {}
onSearchChange = (searchValue: string): void => {}
}
Iām not sure this solution will resolve your problem 100% but hope it can help! 
Regards,
Nhung