feat: per-note spellcheck (#815)

* feat: per-note spellcheck control

* fix: remove fill from svg

* feat: move spellcheck pref into defaults preferences section

* fix: use faded css class instead of opacity

* feat: plus editor 1.6.0

app/assets/javascripts/components/Icon.tsx

@@ -113,6 +113,7 @@ const ICONS = {
   add: AddIcon,
   help: HelpIcon,
   keyboard: KeyboardIcon,
+  spellcheck: NotesIcon,
   'list-bulleted': ListBulleted,
   'link-off': LinkOffIcon,
   listed: ListedIcon,

app/assets/javascripts/components/NotesOptions.tsx

@@ -35,6 +35,8 @@ const DeletePermanentlyButton = ({
   </button>
 );
 
+const iconClass = 'color-neutral mr-2';
+
 const getWordCount = (text: string) => {
   if (text.trim().length === 0) {
     return 0;
@@ -133,6 +135,39 @@ const NoteAttributes: FunctionComponent<{ application: SNApplication, note: SNNo
   );
 };
 
+const SpellcheckOptions: FunctionComponent<{
+  appState: AppState, note: SNNote
+}> = ({ appState, note }) => {
+
+  const editor = appState.application.componentManager.editorForNote(note);
+  const spellcheckControllable = Boolean(
+    !editor ||
+    appState.application.getFeature(editor.identifier)?.spellcheckControl
+  );
+  const noteSpellcheck = !spellcheckControllable ? true : note ? appState.notes.getSpellcheckStateForNote(note) : undefined;
+
+  return (
+    <div className="flex flex-col px-3 py-1.5">
+      <Switch
+        className="px-0 py-0"
+        checked={noteSpellcheck}
+        disabled={!spellcheckControllable}
+        onChange={() => {
+          appState.notes.toggleGlobalSpellcheckForNote(note);
+        }}
+      >
+        <span className="flex items-center">
+          <Icon type='spellcheck' className={iconClass} />
+          Spellcheck
+        </span>
+      </Switch>
+      {!spellcheckControllable && (
+        <p className="text-xs pt-1.5">Spellcheck cannot be controlled for this editor.</p>
+      )}
+    </div>
+  );
+};
+
 export const NotesOptions = observer(
   ({ application, appState, closeOnBlur, onSubmenuChange }: Props) => {
     const [tagsMenuOpen, setTagsMenuOpen] = useState(false);
@@ -171,8 +206,6 @@ export const NotesOptions = observer(
 
     const tagsButtonRef = useRef<HTMLButtonElement>(null);
 
-    const iconClass = 'color-neutral mr-2';
-
     useEffect(() => {
       if (onSubmenuChange) {
         onSubmenuChange(tagsMenuOpen);
@@ -350,10 +383,9 @@ export const NotesOptions = observer(
                 >
                   <span
                     className={`whitespace-nowrap overflow-hidden overflow-ellipsis
-                      ${
-                        appState.notes.isTagInSelectedNotes(tag)
-                          ? 'font-bold'
-                          : ''
+                      ${appState.notes.isTagInSelectedNotes(tag)
+                        ? 'font-bold'
+                        : ''
                       }`}
                   >
                     {tag.title}
@@ -484,9 +516,16 @@ export const NotesOptions = observer(
             </button>
           </>
         )}
+
+
         {notes.length === 1 ? (
           <>
             <div className="min-h-1px my-2 bg-border"></div>
+
+            <SpellcheckOptions appState={appState} note={notes[0]} />
+
+            <div className="min-h-1px my-2 bg-border"></div>
+
             <NoteAttributes application={application} note={notes[0]} />
           </>
         ) : null}

app/assets/javascripts/components/Switch.tsx

@@ -29,7 +29,7 @@ export const Switch: FunctionalComponent<SwitchProps> = (
 
   return (
     <label
-      className={`sn-component flex justify-between items-center cursor-pointer px-3 ${className}`}
+      className={`sn-component flex justify-between items-center cursor-pointer px-3 ${className} ${isDisabled ? 'faded' : ''}`}
       {...(props.role ? { role: props.role } : {})}
     >
       {props.children}
@@ -51,9 +51,8 @@ export const Switch: FunctionalComponent<SwitchProps> = (
         />
         <span
           aria-hidden
-          className={`sn-switch-handle ${
-            checked ? 'sn-switch-handle--right' : ''
-          }`}
+          className={`sn-switch-handle ${checked ? 'sn-switch-handle--right' : ''
+            }`}
         />
       </CustomCheckboxContainer>
     </label>