feat: Added "Find in note" option to note options/context menu for Super notes

packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx

@@ -8,7 +8,6 @@ import {
   PIN_NOTE_COMMAND,
   SHOW_HIDDEN_OPTIONS_KEYBOARD_COMMAND,
   STAR_NOTE_COMMAND,
-  SUPER_SHOW_MARKDOWN_PREVIEW,
 } from '@standardnotes/ui-services'
 import ChangeEditorOption from './ChangeEditorOption'
 import ListedActionsOption from './Listed/ListedActionsOption'
@@ -24,7 +23,6 @@ import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/Keyboard
 import { NoteAttributes } from './NoteAttributes'
 import { SpellcheckOptions } from './SpellcheckOptions'
 import { NoteSizeWarning } from './NoteSizeWarning'
-import { useCommandService } from '../CommandProvider'
 import { iconClass } from './ClassNames'
 import SuperNoteOptions from './SuperNoteOptions'
 import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem'
@@ -48,12 +46,6 @@ const NotesOptions = ({ notes, closeMenu }: NotesOptionsProps) => {
 
   const [altKeyDown, setAltKeyDown] = useState(false)
   const { toggleAppPane } = useResponsiveAppPane()
-  const commandService = useCommandService()
-
-  const markdownShortcut = useMemo(
-    () => commandService.keyboardShortcutForCommand(SUPER_SHOW_MARKDOWN_PREVIEW),
-    [commandService],
-  )
 
   const toggleOn = (condition: (note: SNNote) => boolean) => {
     const notesMatchingAttribute = notes.filter(condition)
@@ -213,10 +205,6 @@ const NotesOptions = ({ notes, closeMenu }: NotesOptionsProps) => {
     [application],
   )
 
-  const enableSuperMarkdownPreview = useCallback(() => {
-    commandService.triggerCommand(SUPER_SHOW_MARKDOWN_PREVIEW)
-  }, [commandService])
-
   const toggleLineWidthModal = useCallback(() => {
     application.keyboardService.triggerCommand(CHANGE_EDITOR_WIDTH_COMMAND)
   }, [application.keyboardService])
@@ -468,13 +456,7 @@ const NotesOptions = ({ notes, closeMenu }: NotesOptionsProps) => {
 
       {notes.length === 1 && (
         <>
-          {notes[0].noteType === NoteType.Super && (
-            <SuperNoteOptions
-              note={notes[0]}
-              markdownShortcut={markdownShortcut}
-              enableSuperMarkdownPreview={enableSuperMarkdownPreview}
-            />
-          )}
+          {notes[0].noteType === NoteType.Super && <SuperNoteOptions closeMenu={closeMenu} />}
 
           {!areSomeNotesInSharedVault && (
             <MenuSection>

packages/web/src/javascripts/Components/NotesOptions/SuperNoteOptions.tsx

@@ -1,20 +1,42 @@
-import { SNNote } from '@standardnotes/snjs'
-import { PlatformedKeyboardShortcut } from '@standardnotes/ui-services'
 import Icon from '../Icon/Icon'
 import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator'
 import MenuItem from '../Menu/MenuItem'
 import { iconClass } from './ClassNames'
 import MenuSection from '../Menu/MenuSection'
+import { SUPER_SHOW_MARKDOWN_PREVIEW, SUPER_TOGGLE_SEARCH } from '@standardnotes/ui-services'
+import { useMemo, useCallback } from 'react'
+import { useCommandService } from '../CommandProvider'
 
 type Props = {
-  note: SNNote
-  markdownShortcut?: PlatformedKeyboardShortcut
-  enableSuperMarkdownPreview: () => void
+  closeMenu: () => void
 }
 
-const SuperNoteOptions = ({ markdownShortcut, enableSuperMarkdownPreview }: Props) => {
+const SuperNoteOptions = ({ closeMenu }: Props) => {
+  const commandService = useCommandService()
+
+  const markdownShortcut = useMemo(
+    () => commandService.keyboardShortcutForCommand(SUPER_SHOW_MARKDOWN_PREVIEW),
+    [commandService],
+  )
+
+  const findShortcut = useMemo(() => commandService.keyboardShortcutForCommand(SUPER_TOGGLE_SEARCH), [commandService])
+
+  const enableSuperMarkdownPreview = useCallback(() => {
+    commandService.triggerCommand(SUPER_SHOW_MARKDOWN_PREVIEW)
+  }, [commandService])
+
+  const findInNote = useCallback(() => {
+    commandService.triggerCommand(SUPER_TOGGLE_SEARCH)
+    closeMenu()
+  }, [closeMenu, commandService])
+
   return (
     <MenuSection>
+      <MenuItem onClick={findInNote}>
+        <Icon type="search" className={iconClass} />
+        Find in note
+        {findShortcut && <KeyboardShortcutIndicator className="ml-auto" shortcut={findShortcut} />}
+      </MenuItem>
       <MenuItem onClick={enableSuperMarkdownPreview}>
         <Icon type="markdown" className={iconClass} />
         Show Markdown