feat(preferences): Tools segment (#657)

app/assets/javascripts/preferences/panes/General.tsx

@@ -3,6 +3,7 @@ import { AppState } from '@/ui_models/app_state';
 import { FunctionComponent } from 'preact';
 import { PreferencesPane } from '../components';
 import { ErrorReporting } from './general-segments';
+import { Tools } from './general-segments/Tools';
 
 interface GeneralProps {
   appState: AppState;
@@ -11,6 +12,7 @@ interface GeneralProps {
 
 export const General: FunctionComponent<GeneralProps> = (props) => (
   <PreferencesPane>
+    <Tools application={props.application} />
     <ErrorReporting appState={props.appState} />
   </PreferencesPane>
 );

app/assets/javascripts/preferences/panes/general-segments/Tools.tsx

@@ -0,0 +1,86 @@
+import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
+import { Switch } from '@/components/Switch';
+import {
+  PreferencesGroup,
+  PreferencesSegment,
+  Subtitle,
+  Text,
+  Title,
+} from '@/preferences/components';
+import { WebApplication } from '@/ui_models/application';
+import { PrefKey } from '@standardnotes/snjs';
+import { observer } from 'mobx-react-lite';
+import { FunctionalComponent } from 'preact';
+import { useState } from 'preact/hooks';
+
+type Props = {
+  application: WebApplication;
+};
+
+export const Tools: FunctionalComponent<Props> = observer(
+  ({ application }: Props) => {
+    const [monospaceFont, setMonospaceFont] = useState(() =>
+      application.getPreference(PrefKey.EditorMonospaceEnabled)
+    );
+    const [marginResizers, setMarginResizers] = useState(() =>
+      application.getPreference(PrefKey.EditorResizersEnabled)
+    );
+    const [spellcheck, setSpellcheck] = useState(() =>
+      application.getPreference(PrefKey.EditorSpellcheck)
+    );
+
+    const toggleMonospaceFont = () => {
+      setMonospaceFont(!monospaceFont);
+      application.setPreference(PrefKey.EditorMonospaceEnabled, !monospaceFont);
+    };
+
+    const toggleMarginResizers = () => {
+      setMarginResizers(!marginResizers);
+      application.setPreference(PrefKey.EditorResizersEnabled, !marginResizers);
+    };
+
+    const toggleSpellcheck = () => {
+      setSpellcheck(!spellcheck);
+      application.setPreference(PrefKey.EditorSpellcheck, !spellcheck);
+    };
+
+    return (
+      <PreferencesGroup>
+        <PreferencesSegment>
+          <Title>Tools</Title>
+          <div className="mt-2">
+            <div className="flex items-center justify-between">
+              <div className="flex flex-col">
+                <Subtitle>Monospace Font</Subtitle>
+                <Text>Toggles the font style in the Plain Text editor.</Text>
+              </div>
+              <Switch onChange={toggleMonospaceFont} checked={monospaceFont} />
+            </div>
+            <HorizontalSeparator classes="mt-5 mb-3" />
+            <div className="flex items-center justify-between">
+              <div className="flex flex-col">
+                <Subtitle>Margin Resizers</Subtitle>
+                <Text>Allows left and right editor margins to be resized.</Text>
+              </div>
+              <Switch
+                onChange={toggleMarginResizers}
+                checked={marginResizers}
+              />
+            </div>
+            <HorizontalSeparator classes="mt-5 mb-3" />
+            <div className="flex items-center justify-between">
+              <div className="flex flex-col">
+                <Subtitle>Spellcheck</Subtitle>
+                <Text>
+                  May degrade performance, especially with long notes. Available
+                  in the Plain Text editor and most specialty editors.
+                </Text>
+              </div>
+              <Switch onChange={toggleSpellcheck} checked={spellcheck} />
+            </div>
+          </div>
+        </PreferencesSegment>
+      </PreferencesGroup>
+    );
+  }
+);

app/assets/javascripts/preferences/panes/general-segments/index.ts

@@ -1 +1,2 @@
 export * from './ErrorReporting';
+export * from './Tools';

app/assets/javascripts/views/editor/editor-view.pug

@@ -59,42 +59,6 @@
     .sn-component(ng-if='self.note')
       #editor-menu-bar.sk-app-bar.no-edges
         .left
-          .sk-app-bar-item(
-            click-outside=`self.setMenuState('showOptionsMenu', false)`,
-            is-open='self.state.showOptionsMenu',
-            ng-class="{'selected' : self.state.showOptionsMenu}",
-            ng-click="self.toggleMenu('showOptionsMenu')"
-            )
-            .sk-label Options
-            .sk-menu-panel.dropdown-menu(ng-if='self.state.showOptionsMenu')
-              .sk-menu-panel-section
-                .sk-menu-panel-header
-                  .sk-menu-panel-header-title Global Display
-                menu-row(
-                  action="self.selectedMenuItem(true); self.toggleWebPrefKey(self.prefKeyMonospace)"
-                  circle="self.state.monospaceFont ? 'success' : 'neutral'",
-                  desc="'Toggles the font style for the default editor'",
-                  disabled='self.state.editorComponent',
-                  label="'Monospace Font'",
-                  subtitle="self.state.editorComponent ? 'Not available with editor extensions' : null"
-                  )
-                menu-row(
-                  action="self.selectedMenuItem(true); self.toggleWebPrefKey(self.prefKeySpellcheck)"
-                  circle="self.state.spellcheck ? 'success' : 'neutral'",
-                  desc="'Toggles spellcheck for the default editor'",
-                  disabled='self.state.editorComponent',
-                  label="'Spellcheck'",
-                  subtitle=`
-                    self.state.editorComponent
-                      ? 'Not available with editor extensions'
-                      : (self.state.isDesktop ? 'May degrade editor performance' : null)
-                    `)
-                menu-row(
-                  action="self.selectedMenuItem(true); self.toggleWebPrefKey(self.prefKeyMarginResizers)"
-                  circle="self.state.marginResizersEnabled ? 'success' : 'neutral'",
-                  desc="'Allows for editor left and right margins to be resized'",
-                  label="'Margin Resizers'"
-                  )
           .sk-app-bar-item(
             click-outside=`self.setMenuState('showEditorMenu', false)`
             is-open='self.state.showEditorMenu',

app/assets/javascripts/views/editor/editor_view.ts

@@ -1,6 +1,4 @@
-import {
+import { STRING_SAVING_WHILE_DOCUMENT_HIDDEN } from './../../strings';
-  STRING_SAVING_WHILE_DOCUMENT_HIDDEN,
-} from './../../strings';
 import { Editor } from '@/ui_models/editor';
 import { WebApplication } from '@/ui_models/application';
 import { PanelPuppet, WebDirective } from '@/types';
@@ -61,7 +59,6 @@ type EditorState = {
   isDesktop?: boolean;
   syncTakingTooLong: boolean;
   showActionsMenu: boolean;
-  showOptionsMenu: boolean;
   showEditorMenu: boolean;
   showHistoryMenu: boolean;
   spellcheck: boolean;
@@ -202,7 +199,7 @@ class EditorViewCtrl extends PureViewCtrl<unknown, EditorState> {
     });
     this.autorun(() => {
       this.setState({
-        showProtectedWarning: this.appState.notes.showProtectedWarning
+        showProtectedWarning: this.appState.notes.showProtectedWarning,
       });
     });
   }
@@ -216,7 +213,6 @@ class EditorViewCtrl extends PureViewCtrl<unknown, EditorState> {
       spellcheck: true,
       syncTakingTooLong: false,
       showActionsMenu: false,
-      showOptionsMenu: false,
       showEditorMenu: false,
       showHistoryMenu: false,
       noteStatus: undefined,
@@ -272,11 +268,11 @@ class EditorViewCtrl extends PureViewCtrl<unknown, EditorState> {
   async handleEditorNoteChange() {
     this.cancelPendingSetStatus();
     const note = this.editor.note;
-    const showProtectedWarning = note.protected && !this.application.hasProtectionSources();
+    const showProtectedWarning =
+      note.protected && !this.application.hasProtectionSources();
     this.setShowProtectedWarning(showProtectedWarning);
     await this.setState({
       showActionsMenu: false,
-      showOptionsMenu: false,
       showEditorMenu: false,
       showHistoryMenu: false,
       noteStatus: undefined,
@@ -364,12 +360,7 @@ class EditorViewCtrl extends PureViewCtrl<unknown, EditorState> {
   }
 
   closeAllMenus(exclude?: string) {
-    const allMenus = [
+    const allMenus = ['showEditorMenu', 'showActionsMenu', 'showHistoryMenu'];
-      'showOptionsMenu',
-      'showEditorMenu',
-      'showActionsMenu',
-      'showHistoryMenu',
-    ];
     const menuState: any = {};
     for (const candidate of allMenus) {
       if (candidate !== exclude) {
@@ -591,7 +582,7 @@ class EditorViewCtrl extends PureViewCtrl<unknown, EditorState> {
   }
 
   clickedTextArea() {
-    this.setMenuState('showOptionsMenu', false);
+    this.closeAllMenus();
   }
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -607,12 +598,6 @@ class EditorViewCtrl extends PureViewCtrl<unknown, EditorState> {
     this.lastEditorFocusEventSource = undefined;
   }
 
-  selectedMenuItem(hide: boolean) {
-    if (hide) {
-      this.setMenuState('showOptionsMenu', false);
-    }
-  }
-
   setShowProtectedWarning(show: boolean) {
     this.appState.notes.setShowProtectedWarning(show);
   }
@@ -757,13 +742,10 @@ class EditorViewCtrl extends PureViewCtrl<unknown, EditorState> {
   /** @components */
 
   registerComponentHandler() {
-    this.unregisterComponent = this.application.componentManager!.registerHandler(
+    this.unregisterComponent =
-      {
+      this.application.componentManager!.registerHandler({
         identifier: 'editor',
-        areas: [
+        areas: [ComponentArea.EditorStack, ComponentArea.Editor],
-          ComponentArea.EditorStack,
-          ComponentArea.Editor,
-        ],
         contextRequestHandler: (componentUuid) => {
           const currentEditor = this.state.editorComponent;
           if (
@@ -778,8 +760,7 @@ class EditorViewCtrl extends PureViewCtrl<unknown, EditorState> {
             this.closeAllMenus();
           }
         },
-      }
+      });
-    );
   }
 
   async reloadStackComponents() {
@@ -809,9 +790,8 @@ class EditorViewCtrl extends PureViewCtrl<unknown, EditorState> {
   }
 
   async toggleStackComponentForCurrentItem(component: SNComponent) {
-    const hidden = this.application.componentManager!.isComponentHidden(
+    const hidden =
-      component
+      this.application.componentManager!.isComponentHidden(component);
-    );
     if (hidden || !component.active) {
       this.application.componentManager!.setComponentHidden(component, false);
       await this.associateComponentWithCurrentNote(component);
@@ -844,16 +824,14 @@ class EditorViewCtrl extends PureViewCtrl<unknown, EditorState> {
   }
 
   registerKeyboardShortcuts() {
-    this.removeTrashKeyObserver = this.application
+    this.removeTrashKeyObserver = this.application.io.addKeyObserver({
-      .io
+      key: KeyboardKey.Backspace,
-      .addKeyObserver({
+      notTags: ['INPUT', 'TEXTAREA'],
-        key: KeyboardKey.Backspace,
+      modifiers: [KeyboardModifier.Meta],
-        notTags: ['INPUT', 'TEXTAREA'],
+      onKeyDown: () => {
-        modifiers: [KeyboardModifier.Meta],
+        this.deleteNote(false);
-        onKeyDown: () => {
+      },
-          this.deleteNote(false);
+    });
-        },
-      });
   }
 
   setScrollPosition() {
@@ -883,39 +861,37 @@ class EditorViewCtrl extends PureViewCtrl<unknown, EditorState> {
     const editor = document.getElementById(
       ElementIds.NoteTextEditor
     )! as HTMLInputElement;
-    this.removeTabObserver = this.application
+    this.removeTabObserver = this.application.io.addKeyObserver({
-      .io
+      element: editor,
-      .addKeyObserver({
+      key: KeyboardKey.Tab,
-        element: editor,
+      onKeyDown: (event) => {
-        key: KeyboardKey.Tab,
+        if (document.hidden || this.note.locked || event.shiftKey) {
-        onKeyDown: (event) => {
+          return;
-          if (document.hidden || this.note.locked || event.shiftKey) {
+        }
-            return;
+        event.preventDefault();
-          }
+        /** Using document.execCommand gives us undo support */
-          event.preventDefault();
+        const insertSuccessful = document.execCommand(
-          /** Using document.execCommand gives us undo support */
+          'insertText',
-          const insertSuccessful = document.execCommand(
+          false,
-            'insertText',
+          '\t'
-            false,
+        );
-            '\t'
+        if (!insertSuccessful) {
-          );
+          /** document.execCommand works great on Chrome/Safari but not Firefox */
-          if (!insertSuccessful) {
+          const start = editor.selectionStart!;
-            /** document.execCommand works great on Chrome/Safari but not Firefox */
+          const end = editor.selectionEnd!;
-            const start = editor.selectionStart!;
+          const spaces = '    ';
-            const end = editor.selectionEnd!;
+          /** Insert 4 spaces */
-            const spaces = '    ';
+          editor.value =
-            /** Insert 4 spaces */
+            editor.value.substring(0, start) +
-            editor.value =
+            spaces +
-              editor.value.substring(0, start) +
+            editor.value.substring(end);
-              spaces +
+          /** Place cursor 4 spaces away from where the tab key was pressed */
-              editor.value.substring(end);
+          editor.selectionStart = editor.selectionEnd = start + 4;
-            /** Place cursor 4 spaces away from where the tab key was pressed */
+        }
-            editor.selectionStart = editor.selectionEnd = start + 4;
+        this.editorValues.text = editor.value;
-          }
+        this.save(this.note, copyEditorValues(this.editorValues), true);
-          this.editorValues.text = editor.value;
+      },
-          this.save(this.note, copyEditorValues(this.editorValues), true);
+    });
-        },
-      });
 
     editor.addEventListener('scroll', this.setScrollPosition);
     editor.addEventListener('input', this.resetScrollPosition);