Sanity: Prop to turn on spell check on portable text editor

[readeral]

Is your feature request related to a problem? Please describe.

Currently portable text does not take advantage of inbuilt browser spell check.

Describe the solution you'd like
It would be fantastic if there could be a options prop on the block type that would allow us to set this prop found here

Are you open to PRs to enable this?

        <SlateReactEditor
          spellCheck={false}
          ...
        />

Describe alternatives you've considered
I've considered a plugin that would implement a custom spell check - but to iterate through all portable text objects, especially as content gets longer, would become a very expensive process.

Additional context
Most recent thread in slack: https://sanity-io-land.slack.com/archives/C9Z7RC3V1/p1584148667066600

[readeral]

To see the desired behaviour:

document.querySelectorAll('[data-slate-editor=true]')[0].setAttribute("spellcheck", "true") or

document.querySelectorAll('[data-focus-path="MY_FIELD_HERE"]')[0].querySelectorAll('[data-slate-editor=true]')[0].setAttribute("spellcheck", "true")

A really hacky workaround circumventing react to turn it on via terminal to test the experience.

[samzhao]

Thanks for turning our discussion into this ticket @readeral !

I've found a way to do this without waiting for an update on Sanity Studio by using custom input component.

Here's what I did with the help of @readeral's suggestion:

// customBodyPortableText.js

import React from 'react'
import { BlockEditor } from 'part:@sanity/form-builder'

// should probably extract this into its own file
const CustomEditor = props => {
  const ref = React.createRef()

  React.useEffect(() => {
    const containerEl = ref.current
    if (!containerEl) return

    const editor = containerEl.querySelector('[data-slate-editor="true"]')

    editor && editor.setAttribute('spellcheck', true)
  }, [ref])

  return (
    <div ref={ref}>
      <BlockEditor {...props} />
    </div>
  )
}

export default {
  name: 'customBodyPortableText',
  type: 'array',
  title: 'Post body',
  inputComponent: CustomEditor,
  of: [
    {
      type: 'block',
      title: 'Block',
      ...
    }
  ]
}

[genox]

Would be interesting to know if there’s a technical reason for default browser spellchecking being disabled by default. Excess API requests? Trouble with portable text? Spell check would be really helpful to avoid stupid typos that you only notice once a text is published. Default browser spellchecking catches almost all of those. :-)

[vicbergquist]

We are working on making this possible, so stay tuned 👍