Turn on spell check for all TextEditors in Connect/Grammar/Diagnostic

[cissyxyu]

WHAT

Turn on spell check for the TextEditor component everywhere it appears in Connect, Diagnostic or Grammar admin panels (besides text boxes where students are typing their answer).

WHY

So admin have an additional spell check step before they make edits to any student-facing text.

HOW

Simply pass the shouldCheckSpelling flag to the React component when initialized.

Screenshots

Notion Card Links

(Please provide links to any relevant Notion card(s) relevant to this PR.)

What have you done to QA this feature?

Deploy to staging, go through the checklist on the Notion card and test all the flows listed, making sure that spell check is activated.

PR Checklist	Your Answer
Have you added and/or updated tests?	manually tested
Have you deployed to Staging?	yes
Self-Review: Have you done an initial self-review of the code below on Github?	yes

[cissyxyu]

Are there any places this editor is used where we don't want spellcheck? I'm just wondering if it makes sense to just change the default behavior of the editor so we don't have to remember to apply this prop if we use it in another place.

Yes, we don't want to use spell check in any boxes where the student is typing a response, because we want them to correct spelling in their response based on our feedback.

[emilia-friedberg]

Yes, we don't want to use spell check in any boxes where the student is typing a response, because we want them to correct spelling in their response based on our feedback.

@cissyxyu but isn't that a different text editor? I think we're just using react-contenteditable for those, not the shared draftjs editor you're passing this prop to now.

[brendanshean]

I'm also curious about boilerplate Emilia mentioned. Maybe even one step further with abstracting out:

ContentState={ContentState} 
EditorState={EditorState}

as it seems to be in all of these examples.

[cissyxyu]

Yes, we don't want to use spell check in any boxes where the student is typing a response, because we want them to correct spelling in their response based on our feedback.

@cissyxyu but isn't that a different text editor? I think we're just using react-contenteditable for those, not the shared draftjs editor you're passing this prop to now.

I checked it out and you're right -- it looks like the TextEditor we use for student responses is actually a different component. I've updated the TextEditor component itself to have spellcheck, ContentState, and EditorState as inherent attributes rather than passed props, and changed all its references accordingly.

[cissyxyu]

I'm also curious about boilerplate Emilia mentioned. Maybe even one step further with abstracting out:

ContentState={ContentState} 
EditorState={EditorState}

as it seems to be in all of these examples.

Good catch -- I've updated the component now to use ContentState, EditorState, and spellCheck inside the component rather than passed props! And I've removed those attributes from the outside references.