From 917b53b3741523131efcddbda1c3d619c889d79a Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@tlon.io>
Date: Mon, 13 Dec 2021 08:18:32 -0500
Subject: [PATCH] interface: add disable spellcheck setting

Fixes urbit/landscape#79
---
 pkg/interface/src/logic/state/settings.ts              |  4 +++-
 .../src/views/apps/chat/components/ChatEditor.tsx      |  4 ++++
 .../views/apps/settings/components/lib/CalmPref.tsx    | 10 +++++++++-
 pkg/interface/src/views/components/CommentInput.tsx    |  3 +++
 4 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/pkg/interface/src/logic/state/settings.ts b/pkg/interface/src/logic/state/settings.ts
index 82f5710a2e..5e4693ca6b 100644
--- a/pkg/interface/src/logic/state/settings.ts
+++ b/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,
diff --git a/pkg/interface/src/views/apps/chat/components/ChatEditor.tsx b/pkg/interface/src/views/apps/chat/components/ChatEditor.tsx
index 3a5f29fb9d..094eebfd6e 100644
--- a/pkg/interface/src/views/apps/chat/components/ChatEditor.tsx
+++ b/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' }}
diff --git a/pkg/interface/src/views/apps/settings/components/lib/CalmPref.tsx b/pkg/interface/src/views/apps/settings/components/lib/CalmPref.tsx
index 6111f3c1e5..24eb6ed09e 100644
--- a/pkg/interface/src/views/apps/settings/components/lib/CalmPref.tsx
+++ b/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>
diff --git a/pkg/interface/src/views/components/CommentInput.tsx b/pkg/interface/src/views/components/CommentInput.tsx
index e866af0254..e0bcfc931f 100644
--- a/pkg/interface/src/views/components/CommentInput.tsx
+++ b/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}