React-draft-wysiwyg: how to set maxlength

[shaomingming008]

hello,I want to set maxlength but I can not find any apis to set

[tomffee]

Hi, I was handling the same issue as you.

Here is the solution:

• Based on this 1. demo with HTML content ( https://jpuri.github.io/react-draft-wysiwyg/#/demo) I was able to do this:

  onEditorStateChange = (editorState) => {
    this.setState({
      editorState
    });
  };

  handleBeforeInput = (input) => {
    if (this.props.maxLength) {
      if (draftToHtml(convertToRaw(this.state.editorState.getCurrentContent())).length >= this.props.maxLength) {
        return 'handled';
      }
    }
  };


<Editor
  editorState={editorState} //this is actual state of editor
  onEditorStateChange={this.onEditorStateChange}
  handleBeforeInput={this.handleBeforeInput} // THIS IS THE IMPORTANT PART
/>

Basically it's preventing any other input if maxLength props is passed to my component and then use current "html as string" length to compare with editorState.

If you want to know more about draftJS handling, read this.
https://github.com/facebook/draft-js/blob/master/docs/APIReference-Editor.md#cancelable-handlers-optional

I hope this helps.

@jpuri Let me know if my approach is correct, thanks

[chaosforfun]

@tomffee this can't work. because the handleBeforeInput props is not passed to draft-js

[jpuri]

@tomffee : approach looks good.
@chaosforfun : all additional props passed to wysiwyg are passed down to the draft editor.

[chaosforfun]

@jpuri https://github.com/jpuri/react-draft-wysiwyg/blob/84199ad37ab3f7c71e402687e3c824599091dd85/src/Editor/index.js#L316
the filterEditorProps will filter handleBeforeInput

[endiliey]

@chaosforfun: This filter function is not the usual js filter, it returns the filtered out props instead

Reference:
https://github.com/jpuri/react-draft-wysiwyg/blob/84199ad37ab3f7c71e402687e3c824599091dd85/src/utils/common.js#L44-L55

So, all additional props passed to wysiwyg are actually indeed passed to draft-js Editor component.
including handleBeforeInput

@tomffee good approach, but might need to consider handlePastedText as well.

[wonghoman]

@jpuri Hello, this issue had official api now? I also want set maxLength to limit input, look forward to your reply, thanks!

[BrodaNoel]

I'm not sure why, but that proposal is not working for me.
Any news about this feature?

[VadSiam]

Solved this issue. Just added handlePastedText and handleBeforeInput to Editor. Something like this:

<Editor 
  handleBeforeInput={val => {
    const textLength = editorValue.getCurrentContent().getPlainText().length;
    if (val && textLength >= maxLength) {
        return 'handled';
     }
     return 'not-handled';
   }}
  handlePastedText={val => {
     const textLength = editorValue.getCurrentContent().getPlainText().length;
     return ((val.length + textLength) >= maxLength);
    }}
...
/>

where maxLength is your number of limit and editorValue is your current state of Editor

[monk786]

@VadSiam I am using the same approach as yours, but the issue that I am facing is by returning 'handled' instructs the editor that the command has been handled and no more work is required, but what I want to add the following to it as well.

1. Notify the end-user with an error message that they won't be able to type or paste anything further as maxLength is exceeded.

2. If the text length of the pasted text is more than the maxLength, then at least slice the test till max length and paste that and show the errorMsg of maxLength.

not able to find any proper method to update the editorState, with the sliced text.

Any Suggestions?

[Gurubalan-GIT]

@monk786 I played around with this for a while and came up with a solution, @jpuri I guess with this we can close this issue as well ->
As @VadSiam explained, handledBeforeInput would be implemented this way ->

handleBeforeInput = input => {
        const inputLength = this.state.editorState
            .getCurrentContent()
            .getPlainText().length;
        if (input && inputLength >= maxChars) {
            return "handled";
        }
    };

Now for slicing the content when copying, we would need to use the Modifier from Draft-JS, you can refer the documentation here. So the handledPastedText ->

    handlePastedText = input => {
        const inputLength = this.state.editorState
            .getCurrentContent()
            .getPlainText().length;
        let remainingLength = maxChars - inputLength;
        if (input.length + inputLength >= maxChars) {
            const newContent = Modifier.insertText(
                this.state.editorState.getCurrentContent(),
                this.state.editorState.getSelection(),
                input.slice(0,remainingLength)
            );
            this.onEditorStateChange(
                EditorState.push(
                    this.state.editorState,
                    newContent,
                    "insert-characters"
                )
            );
            return true;
        } else {
            return false;
        }
    };

Mind you here the onEditorStateChange is just the onChange method for updating the state of the editor. With this, it will be handled.