feat: add line height & font size settings for plaintext editor (#1700)

2022-09-30 00:50:33 +05:30
parent fc86cebc75
commit 3c699eaa4a
12 changed files with 178 additions and 31 deletions
--- a/packages/models/src/Domain/Syncable/UserPrefs/PrefKey.ts
+++ b/packages/models/src/Domain/Syncable/UserPrefs/PrefKey.ts
@@ -9,6 +9,8 @@ export enum PrefKey {
  EditorMonospaceEnabled = 'monospaceFont',
  EditorSpellcheck = 'spellcheck',
  EditorResizersEnabled = 'marginResizersEnabled',
+  EditorLineHeight = 'editorLineHeight',
+  EditorFontSize = 'editorFontSize',
  SortNotesBy = 'sortBy',
  SortNotesReverse = 'sortReverse',
  NotesShowArchived = 'showArchived',
@@ -43,6 +45,23 @@ export enum NewNoteTitleFormat {
  Empty = 'Empty',
 }

+export enum EditorLineHeight {
+  None = 'None',
+  Tight = 'Tight',
+  Snug = 'Snug',
+  Normal = 'Normal',
+  Relaxed = 'Relaxed',
+  Loose = 'Loose',
+}
+
+export enum EditorFontSize {
+  ExtraSmall = 'ExtraSmall',
+  Small = 'Small',
+  Normal = 'Normal',
+  Medium = 'Medium',
+  Large = 'Large',
+}
+
 export type PrefValue = {
  [PrefKey.TagsPanelWidth]: number
  [PrefKey.NotesPanelWidth]: number
@@ -76,4 +95,6 @@ export type PrefValue = {
  [PrefKey.MobileNotesHideEditorIcon]: boolean
  [PrefKey.NewNoteTitleFormat]: NewNoteTitleFormat
  [PrefKey.CustomNoteTitleFormat]: string
+  [PrefKey.EditorLineHeight]: EditorLineHeight
+  [PrefKey.EditorFontSize]: EditorFontSize
 }
--- a/packages/web/src/javascripts/Components/NoteView/AutoresizingTextarea.tsx
+++ b/packages/web/src/javascripts/Components/NoteView/AutoresizingTextarea.tsx
@@ -3,7 +3,10 @@ import { ComponentPropsWithoutRef, ForwardedRef, forwardRef } from 'react'

 // Based on: https://css-tricks.com/auto-growing-inputs-textareas/#aa-other-ideas
 const AutoresizingNoteViewTextarea = forwardRef(
-  ({ value, ...textareaProps }: ComponentPropsWithoutRef<'textarea'>, ref: ForwardedRef<HTMLTextAreaElement>) => {
+  (
+    { value, className, ...textareaProps }: ComponentPropsWithoutRef<'textarea'>,
+    ref: ForwardedRef<HTMLTextAreaElement>,
+  ) => {
    return (
      <div className="relative inline-grid min-h-[75vh] w-full grid-rows-1 items-stretch md:block md:flex-grow">
        <pre
@@ -11,6 +14,7 @@ const AutoresizingNoteViewTextarea = forwardRef(
          className={classNames(
            'editable font-editor break-word whitespace-pre-wrap',
            'invisible [grid-area:1_/_1] md:hidden',
+            className,
          )}
          aria-hidden
        >
@@ -18,7 +22,7 @@ const AutoresizingNoteViewTextarea = forwardRef(
        </pre>
        <textarea
          value={value}
-          className="editable font-editor [grid-area:1_/_1] md:h-full md:min-h-0"
+          className={classNames('editable font-editor [grid-area:1_/_1] md:h-full md:min-h-0', className)}
          {...textareaProps}
          ref={ref}
        ></textarea>
--- a/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
+++ b/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
@@ -14,6 +14,8 @@ import {
  PayloadEmitSource,
  WebAppEvent,
  Platform,
+  EditorLineHeight,
+  EditorFontSize,
 } from '@standardnotes/snjs'
 import { debounce, isDesktopApplication, isIOS } from '@/Utils'
 import { EditorEventSource } from '../../Types/EditorEventSource'
@@ -63,7 +65,6 @@ type State = {
  isDesktop?: boolean
  lockText: string
  marginResizersEnabled?: boolean
-  monospaceFont?: boolean
  noteLocked: boolean
  noteStatus?: NoteStatus
  saveError?: boolean
@@ -82,6 +83,18 @@ type State = {
  rightResizerOffset: number

  shouldStickyHeader: boolean
+
+  monospaceFont?: boolean
+  lineHeight?: EditorLineHeight
+  fontSize?: EditorFontSize
+}
+
+const PlaintextFontSizeMapping: Record<EditorFontSize, string> = {
+  ExtraSmall: 'text-xs',
+  Small: 'text-sm',
+  Normal: 'text-editor',
+  Medium: 'text-lg',
+  Large: 'text-xl',
 }

 class NoteView extends PureComponent<NoteViewProps, State> {
@@ -701,11 +714,17 @@ class NoteView extends PureComponent<NoteViewProps, State> {
      PrefDefaults[PrefKey.EditorResizersEnabled],
    )

+    const lineHeight = this.application.getPreference(PrefKey.EditorLineHeight, PrefDefaults[PrefKey.EditorLineHeight])
+
+    const fontSize = this.application.getPreference(PrefKey.EditorFontSize, PrefDefaults[PrefKey.EditorFontSize])
+
    await this.reloadSpellcheck()

    this.setState({
      monospaceFont,
      marginResizersEnabled,
+      lineHeight,
+      fontSize,
    })

    reloadFont(monospaceFont)
@@ -1046,14 +1065,18 @@ class NoteView extends PureComponent<NoteViewProps, State> {
          {this.state.editorStateDidLoad && !this.state.editorComponentViewer && !this.state.textareaUnloading && (
            <AutoresizingNoteViewTextarea
              autoComplete="off"
+              className={classNames(
+                this.state.lineHeight && `leading-${this.state.lineHeight.toLowerCase()}`,
+                this.state.fontSize && PlaintextFontSizeMapping[this.state.fontSize],
+              )}
              dir="auto"
              id={ElementIds.NoteTextEditor}
              onChange={this.onTextAreaChange}
-              value={this.state.editorText}
-              readOnly={this.state.noteLocked}
              onFocus={this.onContentFocus}
-              spellCheck={this.state.spellcheck}
+              readOnly={this.state.noteLocked}
              ref={(ref) => ref && this.onSystemEditorLoad(ref)}
+              spellCheck={this.state.spellcheck}
+              value={this.state.editorText}
            />
          )}

--- a/packages/web/src/javascripts/Components/Preferences/Panes/General/General.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/General.tsx
@@ -8,6 +8,7 @@ import Defaults from './Defaults'
 import LabsPane from './Labs/Labs'
 import Advanced from '@/Components/Preferences/Panes/General/Advanced/AdvancedSection'
 import PreferencesPane from '../../PreferencesComponents/PreferencesPane'
+import PlaintextDefaults from './PlaintextDefaults'

 type Props = {
  viewControllerManager: ViewControllerManager
@@ -17,8 +18,9 @@ type Props = {

 const General: FunctionComponent<Props> = ({ viewControllerManager, application, extensionsLatestVersions }) => (
  <PreferencesPane>
-    <Tools application={application} />
+    <PlaintextDefaults application={application} />
    <Defaults application={application} />
+    <Tools application={application} />
    <LabsPane application={application} />
    <Advanced
      application={application}
--- a/packages/web/src/javascripts/Components/Preferences/Panes/General/PlaintextDefaults.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/PlaintextDefaults.tsx
@@ -0,0 +1,108 @@
+import { WebApplication } from '@/Application/Application'
+import Dropdown from '@/Components/Dropdown/Dropdown'
+import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
+import Switch from '@/Components/Switch/Switch'
+import { PrefDefaults } from '@/Constants/PrefDefaults'
+import { EditorFontSize, EditorLineHeight, PrefKey } from '@standardnotes/snjs'
+import { useMemo, useState } from 'react'
+import { Subtitle, Title, Text } from '../../PreferencesComponents/Content'
+import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
+import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
+
+type Props = {
+  application: WebApplication
+}
+
+const PlaintextDefaults = ({ application }: Props) => {
+  const [monospaceFont, setMonospaceFont] = useState(() =>
+    application.getPreference(PrefKey.EditorMonospaceEnabled, PrefDefaults[PrefKey.EditorMonospaceEnabled]),
+  )
+
+  const toggleMonospaceFont = () => {
+    setMonospaceFont(!monospaceFont)
+    application.setPreference(PrefKey.EditorMonospaceEnabled, !monospaceFont).catch(console.error)
+  }
+
+  const [lineHeight, setLineHeight] = useState(() =>
+    application.getPreference(PrefKey.EditorLineHeight, PrefDefaults[PrefKey.EditorLineHeight]),
+  )
+
+  const handleLineHeightChange = (value: string) => {
+    setLineHeight(value as EditorLineHeight)
+    application.setPreference(PrefKey.EditorLineHeight, value as EditorLineHeight)
+  }
+
+  const lineHeightDropdownOptions = useMemo(
+    () =>
+      Object.values(EditorLineHeight).map((lineHeight) => ({
+        label: lineHeight,
+        value: lineHeight,
+      })),
+    [],
+  )
+
+  const [fontSize, setFontSize] = useState(() =>
+    application.getPreference(PrefKey.EditorFontSize, PrefDefaults[PrefKey.EditorFontSize]),
+  )
+
+  const handleFontSizeChange = (value: string) => {
+    setFontSize(value as EditorFontSize)
+    application.setPreference(PrefKey.EditorFontSize, value as EditorFontSize)
+  }
+
+  const fontSizeDropdownOptions = useMemo(
+    () =>
+      Object.values(EditorFontSize).map((fontSize) => ({
+        label: fontSize,
+        value: fontSize,
+      })),
+    [],
+  )
+
+  return (
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>Plaintext Note Defaults</Title>
+        <div>
+          <div className="flex items-center justify-between">
+            <div className="flex flex-col">
+              <Subtitle>Monospace Font</Subtitle>
+              <Text>Toggles the font style in plaintext notes</Text>
+            </div>
+            <Switch onChange={toggleMonospaceFont} checked={monospaceFont} />
+          </div>
+          <HorizontalSeparator classes="my-4" />
+          <div>
+            <Subtitle>Line height</Subtitle>
+            <Text>Sets the line height (leading) in plaintext notes</Text>
+            <div className="mt-2">
+              <Dropdown
+                id="def-line-height"
+                label="Select the line height for plaintext notes"
+                items={lineHeightDropdownOptions}
+                value={lineHeight}
+                onChange={handleLineHeightChange}
+              />
+            </div>
+          </div>
+          <HorizontalSeparator classes="my-4" />
+          <div>
+            <Subtitle>Font size</Subtitle>
+            <Text>Sets the font size in plaintext notes</Text>
+            <div className="mt-2">
+              <Dropdown
+                id="def-font-size"
+                label="Select the font size for plaintext notes"
+                items={fontSizeDropdownOptions}
+                value={fontSize}
+                onChange={handleFontSizeChange}
+              />
+            </div>
+          </div>
+        </div>
+      </PreferencesSegment>
+    </PreferencesGroup>
+  )
+}
+
+export default PlaintextDefaults
--- a/packages/web/src/javascripts/Components/Preferences/Panes/General/Tools.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/Tools.tsx
@@ -1,4 +1,3 @@
-import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
 import Switch from '@/Components/Switch/Switch'
 import { Subtitle, Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
 import { WebApplication } from '@/Application/Application'
@@ -14,18 +13,10 @@ type Props = {
 }

 const Tools: FunctionComponent<Props> = ({ application }: Props) => {
-  const [monospaceFont, setMonospaceFont] = useState(() =>
-    application.getPreference(PrefKey.EditorMonospaceEnabled, PrefDefaults[PrefKey.EditorMonospaceEnabled]),
-  )
  const [marginResizers, setMarginResizers] = useState(() =>
    application.getPreference(PrefKey.EditorResizersEnabled, PrefDefaults[PrefKey.EditorResizersEnabled]),
  )

-  const toggleMonospaceFont = () => {
-    setMonospaceFont(!monospaceFont)
-    application.setPreference(PrefKey.EditorMonospaceEnabled, !monospaceFont).catch(console.error)
-  }
-
  const toggleMarginResizers = () => {
    setMarginResizers(!marginResizers)
    application.setPreference(PrefKey.EditorResizersEnabled, !marginResizers).catch(console.error)
@@ -36,14 +27,6 @@ const Tools: FunctionComponent<Props> = ({ application }: Props) => {
      <PreferencesSegment>
        <Title>Tools</Title>
        <div>
-          <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="my-4" />
          <div className="flex items-center justify-between">
            <div className="flex flex-col">
              <Subtitle>Margin Resizers</Subtitle>
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/SelectedRevisionContent.tsx
+++ b/packages/web/src/javascripts/Components/RevisionHistoryModal/SelectedRevisionContent.tsx
@@ -59,7 +59,7 @@ const SelectedRevisionContent: FunctionComponent<SelectedRevisionContentProps> =
          {selectedRevision?.payload.content.text.length ? (
            <textarea
              readOnly={true}
-              className="text-editor font-editor h-full w-full resize-none border-0 bg-default p-4 pt-0 text-text"
+              className="font-editor h-full w-full resize-none border-0 bg-default p-4 pt-0 text-editor text-text"
              value={selectedRevision?.payload.content.text}
            />
          ) : (
--- a/packages/web/src/javascripts/Constants/PrefDefaults.ts
+++ b/packages/web/src/javascripts/Constants/PrefDefaults.ts
@@ -1,4 +1,4 @@
-import { PrefKey, CollectionSort, NewNoteTitleFormat } from '@standardnotes/models'
+import { PrefKey, CollectionSort, NewNoteTitleFormat, EditorLineHeight, EditorFontSize } from '@standardnotes/models'

 export const PrefDefaults = {
  [PrefKey.TagsPanelWidth]: 220,
@@ -8,6 +8,8 @@ export const PrefDefaults = {
  [PrefKey.EditorMonospaceEnabled]: true,
  [PrefKey.EditorSpellcheck]: true,
  [PrefKey.EditorResizersEnabled]: true,
+  [PrefKey.EditorLineHeight]: EditorLineHeight.Normal,
+  [PrefKey.EditorFontSize]: EditorFontSize.Normal,
  [PrefKey.SortNotesBy]: CollectionSort.CreatedAt,
  [PrefKey.SortNotesReverse]: false,
  [PrefKey.NotesShowArchived]: false,
--- a/packages/web/src/stylesheets/_editor.scss
+++ b/packages/web/src/stylesheets/_editor.scss
@@ -119,7 +119,6 @@ $heading-height: 75px;
  border: none;
  outline: none;
  padding: 15px;
-  font-size: var(--sn-stylekit-font-size-editor);
  resize: none;
 }

--- a/packages/web/src/stylesheets/_main.scss
+++ b/packages/web/src/stylesheets/_main.scss
@@ -28,6 +28,8 @@
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
  --safe-area-inset-left: env(safe-area-inset-left, 0);
  --safe-area-inset-right: env(safe-area-inset-right, 0);
+
+  --sn-stylekit-font-size-editor: 0.9375rem;
 }

 html {
--- a/packages/web/src/stylesheets/_stylekit-sub.scss
+++ b/packages/web/src/stylesheets/_stylekit-sub.scss
@@ -1,7 +1,3 @@
-:root {
-  --sn-stylekit-font-size-editor: 0.9375rem;
-}
-
 .sn-component {
  .sk-app-bar {
    &.dynamic-height {
--- a/packages/web/tailwind.config.js
+++ b/packages/web/tailwind.config.js
@@ -83,6 +83,7 @@ module.exports = {
      },
      fontSize: {
        'menu-item': '0.813rem',
+        editor: 'var(--sn-stylekit-font-size-editor)',
      },
      screens: {
        'xsm-only': { min: '320px', max: '639px' },
@@ -146,6 +147,12 @@ module.exports = {
    'border-accessory-tint-4',
    'border-accessory-tint-5',
    'border-accessory-tint-6',
+    'leading-none',
+    'leading-tight',
+    'leading-snug',
+    'leading-normal',
+    'leading-relaxed',
+    'leading-loose',
  ],
  plugins: [
    plugin(function ({ addVariant }) {