fix ssr prop mismatch

[matthewkeil]

Description
Fixes 2 issue for Next.js (or any SSR method).

1. Under SSR the Editable component requires three props to be added to avoid a warning in the console. This is because defaults are added to the component to deal with HAS_BEFORE_INPUT_SUPPORT. They are added because the check fails server side and the warning arrises because the check works client side, resulting in the prop mismatch. The result is to force SSR users to add the following to avoid the warning.

<Editable
  spellCheck={false}
  autoCorrect="false"
  autoCapitalize="false"
>

2. SSR users are not able to use spellCheck, autoCorrect or autoCapitalize. If the developer would like to opt-in to these features they can set them to true and the library will verify compatibility. However it is not possible to SSR render the application because HAS_BEFORE_INPUT_SUPPORT is false on the server which overrides the develop props. If a developer/consumer would like to attempt to use this feature, HAS_BEFORE_INPUT_SUPPORT results in false on the server and true on the browser which throws a warning for prop mismatch.

<Editable
  spellCheck={true}
  autoCorrect="true"
  autoCapitalize="true"
>

Issue
Fixes:
Issue 4318
Issue 4657

Example

Context
Only made change to how props are added to the component, did not change value check HAS_BEFORE_INPUT_SUPPORT which is used in other places and could potentially change how other parts of the render happen.

Made this change to support developer ergonomics for SSR. No longer need to added the spellCheck, auotCorrect and autoCapitalize props to the component. Also made change to support users as 94.03% of users will miss out on the opportunity to use spellCheck, autoCorrect, autoCapitalize with a text editing library when used under SSR situations. Only drawback/tradeoff for this change is 6% of users will see a prop mismatch warning under SSR conditions (similar to issue 1) as the server will add the positive props and the client will not pass the HAS_BEFORE_INPUT_SUPPORT check.

Checks

• The new code matches the existing patterns and styles.
• The tests pass with yarn test.
• The linter passes with yarn lint. (Fix errors with yarn fix.)
• The relevant examples still work. (Run examples with yarn start.)
• You've added a changeset if changing functionality. (Add one with yarn changeset add.)

[changeset-bot]

🦋 Changeset detected

Latest commit: aeb29e7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
slate-react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[dylans]

Thanks @matthewkeil for the thorough explanation and clear PR. If you could please add a changeset (there's a link in the PR), I'll get this landed and include it in the next release. I would choose minor as the option for the impact of this change.

[matthewkeil]

@dylans thanks! Changeset included. Just found this package this weekend and am incorporating it into a new project I'm starting. So far so good.