Draft-js: Question: max-length and different markup for overlength text

[asterikx]

I want to impose a max-length for some of my inputs. But instead of truncating the entered (or pasted) text, I want to apply a different style to that part of the text (at the end of the input field) which causes the overlength. In fact, just like twitter does.

Example (maxlength 3):
Too _long_
Adding "Way " to the beginning should result in:
Way _too long_

Is there a mechanism or an easy way to achieve this with draft.js? I already know that I can retrieve the current input length via editorState.getCurrentContent().getPlainText('').length.

Thanks for any suggestions!

[davidchang]

Hi @mulles3008 - my apologies for a slow response. To arrive at the behavior you're describing, you'll have to build this yourself, reading each change and then applying the inline style appropriately:

https://facebook.github.io/draft-js/docs/api-reference-modifier.html#applyinlinestyle

This doc explains this in a bit more detail: https://facebook.github.io/draft-js/docs/advanced-topics-inline-styles.html#content

Does that make sense/is that helpful?

[asterikx]

Hi @davidchang Thanks for you reply. In the meanwhile I decided to go for the decorator approach (see #104. However I'm still facing the problem of newlines creating additional blocks and thereby breaking the markup (only when pasting text).

If you have any idea/solution for this, I would be glad to hear from you :)

[dtipson]

Related, but I'd like to enforce a maxlength in general, but I'm not sure how to achieve this. In theory, I'd want it to work just like a normal input with a maxlength. Adding maxlength doesn't seem to do the trick.

[dtipson]

Dynamically adding readOnly also doesn't seem to help (and in theory wouldn't be right anyhow, as a maxlength should allow deletion, just not addition). This seems like a pretty basic feature for any text field, so I feel like I'm missing something obvious.

[rommguy]

@dtipson checkout this - how to limit draftJS text
I haven't tried it myself yet, but planning to do so