Как создать пользовательские привязки клавиш в draft.js?

Question

Я нажимаю CTRL+B => Я хочу, чтобы выделенный текст выделен жирным шрифтом.

---

Полезные ссылки:

• http://facebook.github.io/draft-js/docs/advanced-topics-key-bindings.html#content - описывает то, что keyBindingFn и handleKeyCommand делать.

• https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/rich/rich.html - длинный пример.

• https://www.youtube.com/watch?v=0k9suXgCtTA - отличное видео, объясняющее, как добавить кнопку, которая будет переключать смелость.

Answer 1

Нам нужно пройти два реквизита к нашим <Editor/>:
keyBindingFn: отображает CTRL + some key в какое-то действия жала
handleKeyCommand: пропускается этой действие строки и решает, что делать с ним.

import React from 'react'; 

import { 
    Editor, EditorState, 
    RichUtils, getDefaultKeyBinding 
} from 'draft-js'; 


class Problem extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { editorState: EditorState.createEmpty() }; 
    } 

    // this function maps keys we press to strings that represent some action (eg 'undo', or 'underline') 
    // then the this.handleKeyCommand('underline') function gets called with this string. 
    keyBindingFn = (event) => { 
    // we press CTRL + K => return 'bbbold' 
    // we use hasCommandModifier instead of checking for CTRL keyCode because different OSs have different command keys 
    if (KeyBindingUtil.hasCommandModifier(event) && event.keyCode === 75) { return 'bbbold'; } 
    // manages usual things, like: 
    // Ctrl+Z => return 'undo' 
    return getDefaultKeyBinding(event); 
    } 

    // command: string returned from this.keyBidingFn(event) 
    // if this function returns 'handled' string, all ends here. 
    // if it return 'not-handled', handling of :command will be delegated to Editor's default handling. 
    handleKeyCommand = (command) => { 
    let newState; 
    if (command === 'bbbold') { 
     newState = RichUtils.toggleInlineStyle(this.state.editorState, 'BOLD'); 
    } 

    if (newState) { 
     this.setState({ editorState: newState }); 
     return 'handled'; 
    } 
    return 'not-handled'; 
    } 

    render =() => 
    <Editor 
     editorState={this.state.editorState} 
     onChange={(newState) => this.setState({ editorState: newState })} 
     handleKeyCommand={this.handleKeyCommand} 
     keyBindingFn={this.keyBindingFn} 
    /> 
} 

Если вы хотите что-то другое, чем встроенный жирный текст (RichUtils.toggleInlineStyle), вы можете использовать RichUtils.toggleBlockType, RichUtils.toggleCode, etc.