interface: add disable spellcheck setting

Fixes urbit/landscape#79

pkg/interface/src/logic/state/settings.ts

@@ -41,6 +41,7 @@ export interface SettingsState {
     hideUnreads: boolean;
     hideGroups: boolean;
     hideUtilities: boolean;
+    disableSpellcheck: boolean;
   };
   keyboard: ShortcutMapping;
   remoteContentPolicy: RemoteContentPolicy;
@@ -73,7 +74,8 @@ const useSettingsState = createState<SettingsState>(
       hideAvatars: false,
       hideUnreads: false,
       hideGroups: false,
-      hideUtilities: false
+      hideUtilities: false,
+      disableSpellcheck: false
     },
     remoteContentPolicy: {
       imageShown: true,

pkg/interface/src/views/apps/chat/components/ChatEditor.tsx

@@ -8,6 +8,7 @@ import React, { useRef, ClipboardEvent, useEffect, useImperativeHandle } from 'r
 import { Controlled as CodeEditor } from 'react-codemirror2';
 import styled from 'styled-components';
 import { MOBILE_BROWSER_REGEX } from '~/logic/lib/util';
+import useSettingsState from '~/logic/state/settings';
 import '../css/custom.css';
 import { useChatStore } from './ChatPane';
 
@@ -131,6 +132,8 @@ const ChatEditor = React.forwardRef<CodeMirrorShim, ChatEditorProps>(({ inCodeMo
   useImperativeHandle(ref, () => editorRef.current);
   const editor = editorRef.current;
 
+  const disableSpellcheck = useSettingsState(s => s.calm.disableSpellcheck);
+
   const {
     message,
     setMessage
@@ -234,6 +237,7 @@ const ChatEditor = React.forwardRef<CodeMirrorShim, ChatEditorProps>(({ inCodeMo
               fontFamily={inCodeMode ? 'Source Code Pro' : 'Inter'}
               fontSize={1}
               lineHeight="tall"
+              spellCheck={!disableSpellcheck}
               value={message}
               rows={1}
               style={{ width: '100%', background: 'transparent', color: 'currentColor' }}

pkg/interface/src/views/apps/settings/components/lib/CalmPref.tsx

@@ -20,6 +20,7 @@ interface FormSchema {
   audioShown: boolean;
   oembedShown: boolean;
   videoShown: boolean;
+  disableSpellcheck: boolean;
 }
 
 const settingsSel = (s: SettingsState): FormSchema => ({
@@ -28,10 +29,11 @@ const settingsSel = (s: SettingsState): FormSchema => ({
   hideUnreads: s.calm.hideUnreads,
   hideGroups: s.calm.hideGroups,
   hideUtilities: s.calm.hideUtilities,
+  disableSpellcheck: s.calm.disableSpellcheck,
   imageShown: !s.remoteContentPolicy.imageShown,
   videoShown: !s.remoteContentPolicy.videoShown,
   oembedShown: !s.remoteContentPolicy.oembedShown,
-  audioShown: !s.remoteContentPolicy.audioShown
+  audioShown: !s.remoteContentPolicy.audioShown,
 });
 
 export function CalmPrefs() {
@@ -108,6 +110,12 @@ export function CalmPrefs() {
             id="oembedShown"
             caption="Embedded content may contain scripts that can track you"
           />
+          <Text fontWeight="medium">Input settings</Text>
+          <Toggle
+            label="Disable spellcheck"
+            id="disableSpellcheck"
+            caption="Disable browser spellcheck"
+          />
         </Col>
       </Form>
     </FormikOnBlur>

pkg/interface/src/views/components/CommentInput.tsx

@@ -13,6 +13,7 @@ import {
 } from 'formik';
 import React, { useEffect, useMemo } from 'react';
 import * as Yup from 'yup';
+import useSettingsState from '~/logic/state/settings';
 import { ShipImage } from './ShipImage';
 
 interface FormSchema {
@@ -35,6 +36,7 @@ interface CommentInputProps {
 const SubmitTextArea = (props) => {
   const { submitForm } = useFormikContext<FormSchema>();
   const [field] = useField(props.id);
+  const disableSpellcheck = useSettingsState(s => s.calm.disableSpellcheck);
   const onKeyDown = (e: KeyboardEvent) => {
     if ((e.getModifierState('Control') || e.metaKey) && e.key === 'Enter') {
       submitForm();
@@ -50,6 +52,7 @@ const SubmitTextArea = (props) => {
       fontWeight="500"
       fontSize="1"
       flexGrow={1}
+      spellCheck={!disableSpellcheck}
       style={{ resize: 'vertical' }}
       {...field}
       onKeyDown={onKeyDown}