How to limit max project length js

Question

How to limit max characters in js draft?

I can get the length of this state, but how to stop component updating?

var length = editorState.getCurrentContent().getPlainText('').length; 

Answer 1

You must define handleBeforeInput and handlePastedText props. In function handlers, you check the length of the current content + the length of the embedded text, and if it reaches its maximum, you should return the string 'handled' .

UPD 03/21/2018: Updated to the latest versions of the reaction / reaction (16.2.0) and Draft.js (0.10.5).

Working example - https://jsfiddle.net/Ln1hads9/

 const {Editor, EditorState} = Draft; const MAX_LENGTH = 10; class Container extends React.Component { constructor(props) { super(props); this.state = { editorState: EditorState.createEmpty() }; } render() { return ( <div className="container-root"> <Editor placeholder="Type away :)" editorState={this.state.editorState} handleBeforeInput={this._handleBeforeInput} handlePastedText={this._handlePastedText} onChange={this._handleChange} /> </div> ); } _getLengthOfSelectedText = () => { const currentSelection = this.state.editorState.getSelection(); const isCollapsed = currentSelection.isCollapsed(); let length = 0; if (!isCollapsed) { const currentContent = this.state.editorState.getCurrentContent(); const startKey = currentSelection.getStartKey(); const endKey = currentSelection.getEndKey(); const isBackward = currentSelection.getIsBackward(); const blockMap = currentContent.getBlockMap(); const startBlock = currentContent.getBlockForKey(startKey); const endBlock = currentContent.getBlockForKey(endKey); const isStartAndEndBlockAreTheSame = startKey === endKey; const startBlockTextLength = startBlock.getLength(); const endBlockTextLength = endBlock.getLength(); const startSelectedTextLength = startBlockTextLength - currentSelection.getStartOffset(); const endSelectedTextLength = currentSelection.getEndOffset(); const keyAfterEnd = currentContent.getKeyAfter(endKey); if (isStartAndEndBlockAreTheSame) { length += currentSelection.getEndOffset() - currentSelection.getStartOffset(); } else { let currentKey = startKey; let counter = 0; while (currentKey && currentKey !== keyAfterEnd) { if (currentKey === startKey) { length += startSelectedTextLength + 1; } else if (currentKey === endKey) { length += endSelectedTextLength; } else { length += currentContent.getBlockForKey(currentKey).getLength() + 1; } currentKey = currentContent.getKeyAfter(currentKey); }; } } return length; } _handleBeforeInput = () => { const currentContent = this.state.editorState.getCurrentContent(); const currentContentLength = currentContent.getPlainText('').length if (currentContentLength > MAX_LENGTH - 1) { console.log('you can type max ten characters'); return 'handled'; } } _handlePastedText = (pastedText) => { const currentContent = this.state.editorState.getCurrentContent(); const currentContentLength = currentContent.getPlainText('').length; const selectedTextLength = this._getLengthOfSelectedText(); if (currentContentLength + pastedText.length - selectedTextLength > MAX_LENGTH) { console.log('you can type max ten characters'); return 'handled'; } } _handleChange = (editorState) => { this.setState({ editorState }); } } ReactDOM.render(<Container />, document.getElementById('react-root')); 

Answer 2

Michael methods are correct, but the return value of the handler is not. "not_handled" is a pass-through case that allows the Editor component to process input data normally. In this case, we want to stop the editor from processing input.

In older versions of DraftJS, this looks like the presence of a string evaluating to “true” in the processing code, and therefore the above code behaves correctly. In later versions of DraftJS, the above fiddle doesn't work - I don't have a reputation to post more than one Fiddle here, but try Michael's code with v0.10 DraftJS for replication.

To fix this, return "processed" or "true" if you do not want the editor to continue to process the input.

Fiddle with Corrected Return Values

For instance,

 _handleBeforeInput = () => { const currentContent = this.state.editorState.getCurrentContent(); const currentContentLength = currentContent.getPlainText('').length if (currentContentLength > MAX_LENGTH - 1) { console.log('you can type max ten characters'); return 'handled'; } } 

For more information, see the DraftJS docs about canceling handlers.

Answer 3

Think about it for a second. What is called for changes? Your onChange , right? Good. We also know length . Right? We are approaching the "employee", which is onChange :

 const length = editorState.getCurrentContent().getPlainText('').length; // Your onChange function: onChange(editorState) { const MAX_LENGTH = 10; const length = editorState.getCurrentContent().getPlainText('').length; if (length <= MAX_LENGTH) { this.setState({ editorState }) // or this.setState({ editorState: editorState }) } } else { console.log(`Sorry, you've exceeded your limit of ${MAX_LENGTH}`) } 

I have not tried this, but my sixth sense is that it works fine.