Server side rendering results in spellCheck, autoCorrect, and autoCapitalize mismatch

[daniel-keller]

Description Using SlateJS in server side rendering (in this case through NextJS) results in mismatching spellCheck, autoCorrect, and autoCapitalize between server and client. The result is these features fail to work in slate editors that are rendered server side. SlateJS's Editable component sets these properties based on HAS_BEFORE_INPUT_SUPPORT which (I assume) isn't available server side.

Recording

Sandbox https://codesandbox.io/s/github/daniel-keller/nextjs-slatejs-spellcheck-bug

Steps To reproduce the behavior:

1. Open the sandbox https://codesandbox.io/s/github/daniel-keller/nextjs-slatejs-spellcheck-bug
2. The sandbox server side renders the Editable component with spellCheck, autoCorrecct, or autoCapitalize set. A similar error occurs when you remove any of these properties (properties on server absent on client)
3. See error in Console

Expectation spellcheck, autocorrect, and autocapitalize have worked in server side rendering in previous versions of SlateJS (0.58.0).

Environment

• Slate Version: 0.65.0
• Operating System: iOS
• Browser: Chrome, Safari, Firefox
• TypeScript Version: N/A

[cloudre01]

facing the same issue here. Using the version 0.58.x solved this issue when using on Nextjs.

[matthewkeil]

I solved this for next@12.0.2 and slate@0.70.0 using.

<Editable
  className={styles.editable}
  spellCheck={false}
  autoCorrect="false"
  autoCapitalize="false"
/>

[matthewkeil]

added PR https://github.com/ianstormtaylor/slate/pull/4682