Handle multiple actions in handleBeforeInput for DraftJS

Question

I am in a fix in this situation. If the user presses '1. ', i change the block to ordered block. Following is the code I do to change it:

_handleBeforeInput(str) {
    if (str !== '.') {
        return false;
    }
    const { editorState } = this.state;
    const selection = editorState.getSelection();

    const currentBlock = editorState.getCurrentContent()
        .getBlockForKey(selection.getStartKey());
    const blockLength = currentBlock.getLength();

    if (blockLength === 1 && currentBlock.getText() === '1') {
        this.onChange((utilFn.resetBlockType(editorState, 'ordered-list-item')));
        return 'handled';
    }
    return 'not-handled';
}

However, once the user creates an ordered-list-item block, I want to set a limit on the block being created. I tried to use the answer from this question: [How to limit Max Length of Draft js, however I dont know how can i handle multiple handlers in handlebeforeInput.

I tried using switch case etc. but it wasnt helping.

Please help me with this issue if anyone has faced it. Thanks!

score 0 · Answer 1 · answered Mar 18 '18 at 00:43

I realized my mistake... it is pretty straightforward with using multiple if-else, following is the adjusted code:

_handleBeforeInput(str) {
    const { editorState } = this.state;
    const selection = editorState.getSelection();
    const currentBlock = editorState.getCurrentContent()
                            .getBlockForKey(selection.getStartKey());
    const blockLength = currentBlock.getLength()

    const currentContent = this.state.editorState.getCurrentContent();
    const currentContentLength = currentContent.getPlainText('').length

    if (currentContentLength > 10 - 1){
        alert('you can type max ten characters');
        return 'handled';
    }else if (str !== '.') {
        return 'not-handled';
    }else if(str === '.'){
        if (blockLength === 1 && currentBlock.getText() === '1') {
            this.onChange((utilFn.resetBlockType(editorState, 'ordered-list-item')));
            return 'handled';
        }
    }
    return 'not-handled';
}

Handle multiple actions in handleBeforeInput for DraftJS

1 Answers1