I was wondering how to toggle BOLD to text starting from cursor position. RichUtils allows me to use ctrl-b command to toggle bold, which is what I want but with a button. If i currently click my button (richUtils.toggleInlineStyles()) it only applies bold to highlighted text. But I want it to be bold when start typing from cursor position.
How would you achieve this?
I know this question is old but I had the same problem. The difference between using the keyboard shortcut and clicking the button is that when you use the keyboard shortcut, you don't leave the input.
What you need to do is to prevent the button from stealing focus from the input.
You can do it by calling preventDefault from the mousedown event.
It is important that you use mousedown instead of click.
For instance:
<button
type="button"
onMouseDown={(e) => {
e.preventDefault();
updateEditorState(RichUtils.toggleInlineStyle(editorState, 'BOLD'));
}}
>
<strong>B</strong>
</button>
When you click that button, your cursor will still be in the input and the new style will be applied when you start typing.
https://draftjs.org/docs/api-reference-editor-state#setinlinestyleoverride
Returns a new EditorState object with the specified DraftInlineStyle applied as the set of inline styles to be applied to the next inserted characters.
