diff --git a/packages/web/src/javascripts/Components/ContentListView/Header/NewNotePreferences.tsx b/packages/web/src/javascripts/Components/ContentListView/Header/NewNotePreferences.tsx index 00aff6121..ea0d4b8b7 100644 --- a/packages/web/src/javascripts/Components/ContentListView/Header/NewNotePreferences.tsx +++ b/packages/web/src/javascripts/Components/ContentListView/Header/NewNotePreferences.tsx @@ -194,7 +194,7 @@ const NewNotePreferences: FunctionComponent = ({ = ({ = ({ application, extensionsLatestVersio + diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/General/NewNoteDefaults.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/General/NewNoteDefaults.tsx new file mode 100644 index 000000000..da378b86a --- /dev/null +++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/NewNoteDefaults.tsx @@ -0,0 +1,189 @@ +import Dropdown from '@/Components/Dropdown/Dropdown' +import { Subtitle, Title } from '../../PreferencesComponents/Content' +import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup' +import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment' +import { ChangeEventHandler, useCallback, useEffect, useRef, useState } from 'react' +import { DropdownItem } from '@/Components/Dropdown/DropdownItem' +import { useApplication } from '@/Components/ApplicationProvider' +import { EditorOption, getDropdownItemsForAllEditors } from '@/Utils/DropdownItemsForEditors' +import { + FeatureStatus, + NativeFeatureIdentifier, + NewNoteTitleFormat, + PrefDefaults, + PrefKey, + Uuid, + classNames, +} from '@standardnotes/snjs' +import { usePremiumModal } from '@/Hooks/usePremiumModal' +import { NoteTitleFormatOptions } from '@/Components/ContentListView/Header/NoteTitleFormatOptions' +import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator' +import { ErrorBoundary } from '@/Utils/ErrorBoundary' +import { getDayjsFormattedString } from '@/Utils/GetDayjsFormattedString' + +const PrefChangeDebounceTimeInMs = 25 +const HelpPageUrl = 'https://day.js.org/docs/en/display/format#list-of-all-available-formats' + +const NewNoteDefaults = () => { + const application = useApplication() + const premiumModal = usePremiumModal() + + const [editorItems, setEditorItems] = useState([]) + useEffect(() => { + setEditorItems(getDropdownItemsForAllEditors(application)) + }, [application]) + + const [defaultEditorIdentifier, setDefaultEditorIdentifier] = useState( + NativeFeatureIdentifier.TYPES.PlainEditor, + ) + const [newNoteTitleFormat, setNewNoteTitleFormat] = useState( + NewNoteTitleFormat.CurrentDateAndTime, + ) + const [customNoteTitleFormat, setCustomNoteTitleFormat] = useState('') + + const reloadPreferences = useCallback(() => { + const globalDefault = application.componentManager.getDefaultEditorIdentifier() + setDefaultEditorIdentifier(globalDefault) + + setNewNoteTitleFormat( + application.getPreference(PrefKey.NewNoteTitleFormat, PrefDefaults[PrefKey.NewNoteTitleFormat]), + ) + + setCustomNoteTitleFormat( + application.getPreference(PrefKey.CustomNoteTitleFormat, PrefDefaults[PrefKey.CustomNoteTitleFormat]), + ) + }, [application]) + + useEffect(() => { + void reloadPreferences() + }, [reloadPreferences]) + + const selectEditorForNewNoteDefault = useCallback( + (value: EditorOption['value']) => { + let identifier: NativeFeatureIdentifier | Uuid | undefined = undefined + + const feature = NativeFeatureIdentifier.create(value) + if (!feature.isFailed()) { + identifier = feature.getValue() + } else { + const thirdPartyEditor = application.componentManager.findComponentWithPackageIdentifier(value) + if (thirdPartyEditor) { + identifier = Uuid.create(thirdPartyEditor.uuid).getValue() + } + } + + if (!identifier) { + return + } + + if (application.features.getFeatureStatus(identifier) !== FeatureStatus.Entitled) { + const editorItem = editorItems.find((item) => item.value === value) + if (editorItem) { + premiumModal.activate(editorItem.label) + } + return + } + setDefaultEditorIdentifier(value) + + void application.setPreference(PrefKey.DefaultEditorIdentifier, value) + }, + [application, editorItems, premiumModal], + ) + + const setNewNoteTitleFormatChange = useCallback( + (value: string) => { + setNewNoteTitleFormat(value as NewNoteTitleFormat) + void application.setPreference(PrefKey.NewNoteTitleFormat, value as NewNoteTitleFormat) + }, + [application], + ) + + const debounceTimeoutRef = useRef() + + const handleCustomFormatInputChange: ChangeEventHandler = (event) => { + const newFormat = event.currentTarget.value + setCustomNoteTitleFormat(newFormat) + + if (debounceTimeoutRef.current) { + clearTimeout(debounceTimeoutRef.current) + } + + debounceTimeoutRef.current = window.setTimeout(async () => { + void application.setPreference(PrefKey.CustomNoteTitleFormat, newFormat) + }, PrefChangeDebounceTimeInMs) + } + + return ( + + + New Note Defaults +
+
+ Note Type +
+ selectEditorForNewNoteDefault(value as EditorOption['value'])} + /> +
+
+ +
+ Title Format +
+ +
+ {newNoteTitleFormat === NewNoteTitleFormat.CustomFormat && ( +
+
+ +
+
+ Preview: + + {getDayjsFormattedString(undefined, customNoteTitleFormat)} + +
+ +
+ )} +
+
+
+
+ ) +} + +export default NewNoteDefaults