diff --git a/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx b/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx index 5f68080dd..a05d76524 100644 --- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx +++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx @@ -1,6 +1,6 @@ import Icon from '@/Components/Icon/Icon' import { observer } from 'mobx-react-lite' -import { useState, useEffect, useMemo, useCallback } from 'react' +import { useState, useEffect, useMemo, useCallback, useRef } from 'react' import { NoteType, Platform, SNNote } from '@standardnotes/snjs' import { CHANGE_EDITOR_WIDTH_COMMAND, @@ -8,6 +8,9 @@ import { PIN_NOTE_COMMAND, SHOW_HIDDEN_OPTIONS_KEYBOARD_COMMAND, STAR_NOTE_COMMAND, + SUPER_EXPORT_HTML, + SUPER_EXPORT_JSON, + SUPER_EXPORT_MARKDOWN, SUPER_SHOW_MARKDOWN_PREVIEW, } from '@standardnotes/ui-services' import ChangeEditorOption from './ChangeEditorOption' @@ -39,6 +42,8 @@ import { useApplication } from '../ApplicationProvider' import { MutuallyExclusiveMediaQueryBreakpoints } from '@/Hooks/useMediaQuery' import AddToVaultMenuOption from '../Vaults/AddToVaultMenuOption' import { featureTrunkVaultsEnabled } from '@/FeatureTrunk' +import Menu from '../Menu/Menu' +import Popover from '../Popover/Popover' const iconSize = MenuItemIconSize const iconClassDanger = `text-danger mr-2 ${iconSize}` @@ -181,6 +186,9 @@ const NotesOptions = ({ [application], ) + const superExportButtonRef = useRef(null) + const [isSuperExportMenuOpen, setIsSuperExportMenuOpen] = useState(false) + const unauthorized = notes.some((note) => !application.isAuthorizedToRenderItem(note)) if (unauthorized) { return @@ -286,7 +294,48 @@ const NotesOptions = ({ {pinShortcut && } )} - {!isOnlySuperNoteSelected && ( + {isOnlySuperNoteSelected ? ( + <> + { + setIsSuperExportMenuOpen((open) => !open) + }} + > +
+ + Export +
+ +
+ { + setIsSuperExportMenuOpen(!isSuperExportMenuOpen) + }} + className="py-1" + > + + commandService.triggerCommand(SUPER_EXPORT_JSON, notes[0].title)}> + + Export as JSON + + commandService.triggerCommand(SUPER_EXPORT_MARKDOWN, notes[0].title)}> + + Export as Markdown + + commandService.triggerCommand(SUPER_EXPORT_HTML, notes[0].title)}> + + Export as HTML + + + + + ) : ( <> { diff --git a/packages/web/src/javascripts/Components/NotesOptions/SuperNoteOptions.tsx b/packages/web/src/javascripts/Components/NotesOptions/SuperNoteOptions.tsx index db16626d8..c07b983d4 100644 --- a/packages/web/src/javascripts/Components/NotesOptions/SuperNoteOptions.tsx +++ b/packages/web/src/javascripts/Components/NotesOptions/SuperNoteOptions.tsx @@ -1,17 +1,8 @@ import { SNNote } from '@standardnotes/snjs' -import { - PlatformedKeyboardShortcut, - SUPER_EXPORT_HTML, - SUPER_EXPORT_JSON, - SUPER_EXPORT_MARKDOWN, -} from '@standardnotes/ui-services' -import { useRef, useState } from 'react' -import { useCommandService } from '../CommandProvider' +import { PlatformedKeyboardShortcut } from '@standardnotes/ui-services' import Icon from '../Icon/Icon' import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator' -import Menu from '../Menu/Menu' import MenuItem from '../Menu/MenuItem' -import Popover from '../Popover/Popover' import HorizontalSeparator from '../Shared/HorizontalSeparator' import { iconClass } from './ClassNames' @@ -21,12 +12,7 @@ type Props = { enableSuperMarkdownPreview: () => void } -const SuperNoteOptions = ({ note, markdownShortcut, enableSuperMarkdownPreview }: Props) => { - const commandService = useCommandService() - - const exportButtonRef = useRef(null) - const [isExportMenuOpen, setIsExportMenuOpen] = useState(false) - +const SuperNoteOptions = ({ markdownShortcut, enableSuperMarkdownPreview }: Props) => { return ( <> @@ -38,45 +24,6 @@ const SuperNoteOptions = ({ note, markdownShortcut, enableSuperMarkdownPreview } Show Markdown {markdownShortcut && } - - { - setIsExportMenuOpen((open) => !open) - }} - > -
- - Export -
- -
- { - setIsExportMenuOpen(!isExportMenuOpen) - }} - className="py-1" - > - - commandService.triggerCommand(SUPER_EXPORT_JSON, note.title)}> - - Export as JSON - - commandService.triggerCommand(SUPER_EXPORT_MARKDOWN, note.title)}> - - Export as Markdown - - commandService.triggerCommand(SUPER_EXPORT_HTML, note.title)}> - - Export as HTML - - - ) }