Draft-js: how to limit the maximum input length?

[ghost]

[hellendag]

You could check the size of the contents in onChange if the ContentState has changed, and slice off the contents that go beyond the limit.

[ghost]

to solve the problem, as follows:

onChange(editorState) {
    const contentState = editorState.getCurrentContent();
    if (contentState.getPlainText().length > this.props.maxLength) {
        editorState = EditorState.undo(editorState);
    }
    this.setState({editorState});
}

[hellendag]

Well, I don't know if I would recommend using undo for this, since it may jump you back to a previous boundary state that you don't want.

Ideally, you'd be able to do:

onChange(editorState) {
  const contentState = editorState.getCurrentContent();
  const oldContent = this.state.editorState.getCurrentContent();
  const {maxLength} = this.props;
  if (contentState === oldContent || contentState.getPlainText().length <= maxLength) {
      this.setState({editorState});
  }
}

But I think beforeInput native rendering might cause trouble for this, so for now, to be really safe, you'd also want to implement handleBeforeInput:

handleBeforeInput(chars) {
  const totalLength = this.state.editorState.getCurrentContent().getPlainText().length + chars.length;
  return totalLength > this.props.maxLength;
}

By returning true, we prevent the beforeInput event from rendering the new character or from executing onChange.

[ghost]

chars type is String chars.length ?

[hellendag]

That's correct, thanks. Fixed my comment.

[ghost]

when chars will be greater than an length?

[hellendag]

Sorry, I don't understand the question.

[AnasRezk]

@hellendag i tried your solution, but it dose not work for me and this is work for me
your solution prevent setState, but it still writing.

onChange = editorState => {
        const contentState = editorState.getCurrentContent();
        const oldContent = this.state.editorState.getCurrentContent();
        if(contentState === oldContent || contentState.getPlainText().length <= 25) {
            this.setState({ editorState });
        } else {
            const editorState = EditorState.moveFocusToEnd(
                EditorState.push(
                    this.state.editorState,
                    ContentState.createFromText(oldContent.getPlainText())
                )
            );
            this.setState({ editorState });
        }
    }

[Larsrdev]

@AnasRezk to prevent focus move to end, use following solution. This also doesn't jump as mentioned from @hellendag

onChange = editorState => {
        const contentState = editorState.getCurrentContent();
        const oldContent = this.state.editorState.getCurrentContent();
        if(contentState === oldContent || contentState.getPlainText().length <= 25) {
            this.setState({ editorState });
        } else {
            const editorState = EditorState.undo(
                EditorState.push(
                    this.state.editorState,
                    ContentState.createFromText(oldContent.getPlainText()),
                    'delete-character'
                )
            );
            this.setState({ editorState });
        }
    }

here some typescript solution:

getStateWithMaxLengthEnsured(oldState: Draft.EditorState, newState: Draft.EditorState, maxLength: number): Draft.EditorState {
        const contentState = newState.getCurrentContent();
        const oldContent = oldState.getCurrentContent();
        if (contentState === oldContent || contentState.getPlainText().length <= maxLength) {
            return newState;
        } else {
            return Draft.EditorState.undo(
                Draft.EditorState.push(
                    oldState,
                    Draft.ContentState.createFromText(oldContent.getPlainText()),
                    'delete-character'
                )
            );
        }
    }