Bug with text limit constraint as a plugin.

[Perfecto-always]

Description
The given code doesn't work with you inputting alphabets but works when inputting numbers.
I tried using the old version of slate and slate-react (both at version 0.63) and it worked.

Sandbox
Here is a link to codesandbox with the issue.

Steps
To reproduce the behavior:

1. Use latest version of slate, slate-react,
2. Go to sandbox and copy the code if you want to reproduce locally,
3. Try typing numbers and than alphabets.

Expectation
You should not be able to insert any characters after the specified limit whether number or alphabet.

Actual Result
When you type numbers the given code will work as expected. But when you use alphabets the given code fails to prevent insertion after the specified limit. When you try hitting backspace the text is also not deleted until you are not below the threshold specified.

Environment

• Slate Version: 0.72.3
• Slate-React Version: 0.72.5
• Operating System: Windows
• Browser: Chrome

[dylans]

I think you're actually falling victim to #4540 ... perhaps the suggested changes in #4768 will help. (I've only taken a quick look, if that doesn't help let us know).

[Perfecto-always]

I looked at both the issues(you mentioned) but could not come up with a solution (rather do not understand what to do.)

In the meantime, I noticed that if you keep typing past the threshold and hit enter it not only takes you to the new line but also remove all the additional characters that were above the specified limit and if you then try to enter characters on the new line it prevents you from entering.
Having said that, I also want to know, shouldn't Editor.string(editor, []) be fired every time you add or remove characters?

[JanMisker]

I encountered the same problem, and did some step-debugging.
I found a difference in the onDOMBeforeInput that when a alphabet value is inserted, the flow

slate/packages/slate-react/src/components/editable.tsx

Line 514 in 20acca4

if (native) {

goes in the native = true flow, but when a number is inserted, the native is false.

This stems from the regex on this line

slate/packages/slate-react/src/components/editable.tsx

Line 354 in 20acca4

/[a-z ]/i.test(event.data) &&

where only alphabet characters and spaces trigger setting the native to true. Later on the non-native event gets event.preventDefault(), i.e. the native alphabet-event, does not get prevented, i.e. it inserts the text.

Hopefully someone with more insight in the code knows how to fix this.