feat(preferences): Tools segment (#657)

2021-09-29 23:21:48 +05:30
parent 091842555f
commit 7dbfa2fde0
5 changed files with 140 additions and 111 deletions
--- a/app/assets/javascripts/preferences/panes/General.tsx
+++ b/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>
 );
--- a/app/assets/javascripts/preferences/panes/general-segments/Tools.tsx
+++ b/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>
+    );
+  }
+);
--- a/app/assets/javascripts/preferences/panes/general-segments/index.ts
+++ b/app/assets/javascripts/preferences/panes/general-segments/index.ts
@@ -1 +1,2 @@
 export * from './ErrorReporting';
+export * from './Tools';
--- a/app/assets/javascripts/views/editor/editor-view.pug
+++ b/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',
--- a/app/assets/javascripts/views/editor/editor_view.ts
+++ b/app/assets/javascripts/views/editor/editor_view.ts
@@ -1,6 +1,4 @@
-import {
-  STRING_SAVING_WHILE_DOCUMENT_HIDDEN,
-} from './../../strings';
+import { 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 = [
-      'showOptionsMenu',
-      'showEditorMenu',
-      'showActionsMenu',
-      'showHistoryMenu',
-    ];
+    const allMenus = ['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: [
-          ComponentArea.EditorStack,
-          ComponentArea.Editor,
-        ],
+        areas: [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(
-      component
-    );
+    const hidden =
+      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
-      .io
-      .addKeyObserver({
-        key: KeyboardKey.Backspace,
-        notTags: ['INPUT', 'TEXTAREA'],
-        modifiers: [KeyboardModifier.Meta],
-        onKeyDown: () => {
-          this.deleteNote(false);
-        },
-      });
+    this.removeTrashKeyObserver = this.application.io.addKeyObserver({
+      key: KeyboardKey.Backspace,
+      notTags: ['INPUT', 'TEXTAREA'],
+      modifiers: [KeyboardModifier.Meta],
+      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
-      .io
-      .addKeyObserver({
-        element: editor,
-        key: KeyboardKey.Tab,
-        onKeyDown: (event) => {
-          if (document.hidden || this.note.locked || event.shiftKey) {
-            return;
-          }
-          event.preventDefault();
-          /** Using document.execCommand gives us undo support */
-          const insertSuccessful = document.execCommand(
-            'insertText',
-            false,
-            '\t'
-          );
-          if (!insertSuccessful) {
-            /** document.execCommand works great on Chrome/Safari but not Firefox */
-            const start = editor.selectionStart!;
-            const end = editor.selectionEnd!;
-            const spaces = '    ';
-            /** Insert 4 spaces */
-            editor.value =
-              editor.value.substring(0, start) +
-              spaces +
-              editor.value.substring(end);
-            /** 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.removeTabObserver = this.application.io.addKeyObserver({
+      element: editor,
+      key: KeyboardKey.Tab,
+      onKeyDown: (event) => {
+        if (document.hidden || this.note.locked || event.shiftKey) {
+          return;
+        }
+        event.preventDefault();
+        /** Using document.execCommand gives us undo support */
+        const insertSuccessful = document.execCommand(
+          'insertText',
+          false,
+          '\t'
+        );
+        if (!insertSuccessful) {
+          /** document.execCommand works great on Chrome/Safari but not Firefox */
+          const start = editor.selectionStart!;
+          const end = editor.selectionEnd!;
+          const spaces = '    ';
+          /** Insert 4 spaces */
+          editor.value =
+            editor.value.substring(0, start) +
+            spaces +
+            editor.value.substring(end);
+          /** 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);
+      },
+    });

    editor.addEventListener('scroll', this.setScrollPosition);
    editor.addEventListener('input', this.resetScrollPosition);