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

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>

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}
             />
           )}