Comment désactiver la vérification orthographique dans QuillJS (React)

Question

Comment désactiver la vérification orthographique dans quill.js dans React?

J'ai trouvé cette page GitHub qui montre comment désactiver le correcteur orthographique de Quill en JavaScript normal:

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

Cependant, je ne vois pas comment implémenter cela avec un composant React.

Mon composant React (Preact en fait):

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

Pour accéder à l' Quilléditeur, vous devez créer un refpour le <Quill />composant, puis l'utiliser pour définir l'attribut. Voici l'extrait de code:

// 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}
    />
  );
};

J'ai également fait un échantillon: https://codesandbox.io/s/stoic-mendel-4g3jw?file=/src/App.js