Here is an example on how to use RichUtils in Draft.js. The code translated to React Hooks:
jsximport React, { useEffect, useState } from 'react'; import {Editor, EditorState, RichUtils} from 'draft-js'; const MyEditor = () => { const [editorState, setEditorState] = useState(EditorState.createEmpty()); const boldText = (e) => { // onMouseDown and e.preventDefault because editor losses focus if you use onClick e.preventDefault(); let nextState = RichUtils.toggleInlineStyle(editorState, 'BOLD'); setEditorState(nextState); } return ( <div className = 'MyEditor'> <button onMouseDown = {boldText}>Bold</button> <Editor editorState = {editorState} onChange = {editorState => setEditorState(editorState)} /> </div> ); } export default MyEditor;
Hi, I'm Erik, an engineer from Barcelona. If you like the post or have any comments, say hi.