diff --git a/packages/models/src/Domain/Syncable/UserPrefs/PrefKey.ts b/packages/models/src/Domain/Syncable/UserPrefs/PrefKey.ts index b8f0fe469..8738f3b77 100644 --- 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 } diff --git a/packages/web/src/javascripts/Components/NoteView/AutoresizingTextarea.tsx b/packages/web/src/javascripts/Components/NoteView/AutoresizingTextarea.tsx index ba74b2f1d..07365ba3a 100644 --- 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) => { + ( + { value, className, ...textareaProps }: ComponentPropsWithoutRef<'textarea'>, + ref: ForwardedRef, + ) => { return (
@@ -18,7 +22,7 @@ const AutoresizingNoteViewTextarea = forwardRef(
         
diff --git a/packages/web/src/javascripts/Components/NoteView/NoteView.tsx b/packages/web/src/javascripts/Components/NoteView/NoteView.tsx index 3b8104cba..60ac4979b 100644 --- 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 = { + ExtraSmall: 'text-xs', + Small: 'text-sm', + Normal: 'text-editor', + Medium: 'text-lg', + Large: 'text-xl', } class NoteView extends PureComponent { @@ -701,11 +714,17 @@ class NoteView extends PureComponent { 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 { {this.state.editorStateDidLoad && !this.state.editorComponentViewer && !this.state.textareaUnloading && ( ref && this.onSystemEditorLoad(ref)} + spellCheck={this.state.spellcheck} + value={this.state.editorText} /> )} diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/General/General.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/General/General.tsx index db3e8a94a..6ee63651e 100644 --- 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 = ({ viewControllerManager, application, extensionsLatestVersions }) => ( - + + { + 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 ( + + + Plaintext Note Defaults +
+
+
+ Monospace Font + Toggles the font style in plaintext notes +
+ +
+ +
+ Line height + Sets the line height (leading) in plaintext notes +
+ +
+
+ +
+ Font size + Sets the font size in plaintext notes +
+ +
+
+
+
+
+ ) +} + +export default PlaintextDefaults diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/General/Tools.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/General/Tools.tsx index 068d93693..b65f6318c 100644 --- 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 = ({ 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 = ({ application }: Props) => { Tools
-
-
- Monospace Font - Toggles the font style in the Plain Text editor. -
- -
-
Margin Resizers diff --git a/packages/web/src/javascripts/Components/RevisionHistoryModal/SelectedRevisionContent.tsx b/packages/web/src/javascripts/Components/RevisionHistoryModal/SelectedRevisionContent.tsx index e0b032983..ff2ca24dc 100644 --- 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 = {selectedRevision?.payload.content.text.length ? (