Cómo desactivar el corrector ortográfico en QuillJS (React)

Question

¿Cómo se desactiva el corrector ortográfico en quill.js en React?

Encontré esta página de GitHub que muestra cómo deshabilitar el corrector ortográfico de Quill en JavaScript normal:

const quill = new Quill('#editor-container')
quill.root.setAttribute('spellcheck', false)

Sin embargo, no veo cómo implementar esto con un componente React.

Mi componente React (Preact en realidad):

import { h, FunctionalComponent } from 'preact';
import './contentEditor.scss';
import Quill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

interface ContentEditorProps {
  content: string | undefined;
  onChange(value: string): void;
}

const modules = {
  toolbar: [
    [{ header: [1, 2, 3, 4, false] }],
    ['bold', 'italic', 'underline', 'blockquote'],
    [{ color: [] }],
    [{ align: [] }],
    [{ list: 'ordered' }, { list: 'bullet' }],
    [{ indent: '-1' }, { indent: '+1' }],
    ['link', 'image'],
  ],
};

const formats = [
  'header',
  'bold',
  'color',
  'italic',
  'underline',
  'strike',
  'blockquote',
  'list',
  'bullet',
  'align',
  'indent',
  'link',
  'image',
];

export const ContentEditor: FunctionalComponent<ContentEditorProps> = ({
  content,
  onChange,
}) => {
  return (
    <Quill
      theme='snow'
      value={content}
      onChange={onChange}
      modules={modules}
      formats={formats}
    />
  );
};

Answer 1

Para acceder al Quilleditor, debe crear un componente refpara el <Quill />componente y luego usarlo para establecer el atributo. Aquí está el código del fragmento:

// For typings
import Quill from "react-quill";
import QuillEditor from "quill"

export const ContentEditor = ({ content, onChange }) => {
  const ref = React.useRef<Quill & { editor: QuillEditor }>(null);

  // Disable spellcheck as component is mounted
  React.useEffect(() => {
    ref.current?.editor.root.setAttribute("spellcheck", "false");
  }, []);

  return (
    <Quill
      // set the ref to access to quill editor
      ref={ref}
      theme="snow"
      value={content}
      onChange={onChange}
      modules={modules}
      formats={formats}
    />
  );
};

También he hecho una muestra: https://codesandbox.io/s/stoic-mendel-4g3jw?file=/src/App.js