diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx index fb4e6e4a4..831999410 100644 --- a/packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx +++ b/packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx @@ -14,6 +14,7 @@ import PreferencesGroup from '../PreferencesComponents/PreferencesGroup' import PreferencesSegment from '../PreferencesComponents/PreferencesSegment' import { PremiumFeatureIconName } from '@/Components/Icon/PremiumFeatureIcon' import { PrefDefaults } from '@/Constants/PrefDefaults' +import EditorAppearance from './Appearance/EditorAppearance' type Props = { application: WebApplication @@ -145,6 +146,7 @@ const Appearance: FunctionComponent = ({ application }) => { + ) } diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/General/PlaintextDefaults.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Appearance/EditorAppearance.tsx similarity index 54% rename from packages/web/src/javascripts/Components/Preferences/Panes/General/PlaintextDefaults.tsx rename to packages/web/src/javascripts/Components/Preferences/Panes/Appearance/EditorAppearance.tsx index 78507ed40..3fe4dee5a 100644 --- a/packages/web/src/javascripts/Components/Preferences/Panes/General/PlaintextDefaults.tsx +++ b/packages/web/src/javascripts/Components/Preferences/Panes/Appearance/EditorAppearance.tsx @@ -3,7 +3,7 @@ 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, PrefKey } from '@standardnotes/snjs' +import { EditorFontSize, EditorLineHeight, PrefKey } from '@standardnotes/snjs' import { useMemo, useState } from 'react' import { Subtitle, Title, Text } from '../../PreferencesComponents/Content' import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup' @@ -13,7 +13,25 @@ type Props = { application: WebApplication } -const PlaintextDefaults = ({ application }: Props) => { +const EditorDefaults = ({ application }: Props) => { + const [lineHeight, setLineHeight] = useState(() => + application.getPreference(PrefKey.EditorLineHeight, PrefDefaults[PrefKey.EditorLineHeight]), + ) + + const handleLineHeightChange = (value: string) => { + setLineHeight(value as EditorLineHeight) + void application.setPreference(PrefKey.EditorLineHeight, value as EditorLineHeight) + } + + const lineHeightDropdownOptions = useMemo( + () => + Object.values(EditorLineHeight).map((lineHeight) => ({ + label: lineHeight, + value: lineHeight, + })), + [], + ) + const [monospaceFont, setMonospaceFont] = useState(() => application.getPreference(PrefKey.EditorMonospaceEnabled, PrefDefaults[PrefKey.EditorMonospaceEnabled]), ) @@ -41,11 +59,28 @@ const PlaintextDefaults = ({ application }: Props) => { [], ) + const [marginResizers, setMarginResizers] = useState(() => + application.getPreference(PrefKey.EditorResizersEnabled, PrefDefaults[PrefKey.EditorResizersEnabled]), + ) + + const toggleMarginResizers = () => { + setMarginResizers(!marginResizers) + application.setPreference(PrefKey.EditorResizersEnabled, !marginResizers).catch(console.error) + } + return ( - Plaintext Note Defaults -
+ Editor Appearance +
+
+
+ Margin Resizers + Allows left and right editor margins to be resized. +
+ +
+
Monospace Font @@ -67,10 +102,24 @@ const PlaintextDefaults = ({ application }: Props) => { />
+ +
+ Line height + Sets the line height (leading) in plaintext & Super notes +
+ +
+
) } -export default PlaintextDefaults +export default EditorDefaults diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/General/EditorDefaults.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/General/EditorDefaults.tsx deleted file mode 100644 index 570f62a57..000000000 --- a/packages/web/src/javascripts/Components/Preferences/Panes/General/EditorDefaults.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { WebApplication } from '@/Application/Application' -import Dropdown from '@/Components/Dropdown/Dropdown' -import { PrefDefaults } from '@/Constants/PrefDefaults' -import { 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 EditorDefaults = ({ application }: Props) => { - const [lineHeight, setLineHeight] = useState(() => - application.getPreference(PrefKey.EditorLineHeight, PrefDefaults[PrefKey.EditorLineHeight]), - ) - - const handleLineHeightChange = (value: string) => { - setLineHeight(value as EditorLineHeight) - void application.setPreference(PrefKey.EditorLineHeight, value as EditorLineHeight) - } - - const lineHeightDropdownOptions = useMemo( - () => - Object.values(EditorLineHeight).map((lineHeight) => ({ - label: lineHeight, - value: lineHeight, - })), - [], - ) - - return ( - - - Editor Defaults -
-
- Line height - Sets the line height (leading) in plaintext & Super notes -
- -
-
-
-
-
- ) -} - -export default EditorDefaults 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 96af163ed..b873127f9 100644 --- a/packages/web/src/javascripts/Components/Preferences/Panes/General/General.tsx +++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/General.tsx @@ -8,10 +8,8 @@ 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' import Persistence from './Persistence' import SmartViews from './SmartViews/SmartViews' -import EditorDefaults from './EditorDefaults' type Props = { viewControllerManager: ViewControllerManager @@ -22,8 +20,6 @@ type Props = { const General: FunctionComponent = ({ viewControllerManager, application, extensionsLatestVersions }) => ( - - 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 d3650a8f8..b60613dc9 100644 --- a/packages/web/src/javascripts/Components/Preferences/Panes/General/Tools.tsx +++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/Tools.tsx @@ -14,15 +14,6 @@ type Props = { } const Tools: FunctionComponent = ({ application }: Props) => { - const [marginResizers, setMarginResizers] = useState(() => - application.getPreference(PrefKey.EditorResizersEnabled, PrefDefaults[PrefKey.EditorResizersEnabled]), - ) - - const toggleMarginResizers = () => { - setMarginResizers(!marginResizers) - application.setPreference(PrefKey.EditorResizersEnabled, !marginResizers).catch(console.error) - } - const [updateSavingIndicator, setUpdateSavingIndicator] = useState(() => application.getPreference(PrefKey.UpdateSavingStatusIndicator, PrefDefaults[PrefKey.UpdateSavingStatusIndicator]), ) @@ -37,13 +28,6 @@ const Tools: FunctionComponent = ({ application }: Props) => { Tools
-
-
- Margin Resizers - Allows left and right editor margins to be resized. -
- -