Skip to content

Commit 47745cb

Browse files
amanharwaraamanharwara
committed
feat: Added "Find in note" option to note options/context menu for Super notes
1 parent 85c401f commit 47745cb

File tree

4 files changed

+53
-61
lines changed

4 files changed

+53
-61
lines changed

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

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import {
88
PIN_NOTE_COMMAND,
99
SHOW_HIDDEN_OPTIONS_KEYBOARD_COMMAND,
1010
STAR_NOTE_COMMAND,
11-
SUPER_SHOW_MARKDOWN_PREVIEW,
1211
} from '@standardnotes/ui-services'
1312
import ChangeEditorOption from './ChangeEditorOption'
1413
import ListedActionsOption from './Listed/ListedActionsOption'
@@ -24,7 +23,6 @@ import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/Keyboard
2423
import { NoteAttributes } from './NoteAttributes'
2524
import { SpellcheckOptions } from './SpellcheckOptions'
2625
import { NoteSizeWarning } from './NoteSizeWarning'
27-
import { useCommandService } from '../CommandProvider'
2826
import { iconClass } from './ClassNames'
2927
import SuperNoteOptions from './SuperNoteOptions'
3028
import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem'
@@ -48,12 +46,6 @@ const NotesOptions = ({ notes, closeMenu }: NotesOptionsProps) => {
4846

4947
const [altKeyDown, setAltKeyDown] = useState(false)
5048
const { toggleAppPane } = useResponsiveAppPane()
51-
const commandService = useCommandService()
52-
53-
const markdownShortcut = useMemo(
54-
() => commandService.keyboardShortcutForCommand(SUPER_SHOW_MARKDOWN_PREVIEW),
55-
[commandService],
56-
)
5749

5850
const toggleOn = (condition: (note: SNNote) => boolean) => {
5951
const notesMatchingAttribute = notes.filter(condition)
@@ -213,10 +205,6 @@ const NotesOptions = ({ notes, closeMenu }: NotesOptionsProps) => {
213205
[application],
214206
)
215207

216-
const enableSuperMarkdownPreview = useCallback(() => {
217-
commandService.triggerCommand(SUPER_SHOW_MARKDOWN_PREVIEW)
218-
}, [commandService])
219-
220208
const toggleLineWidthModal = useCallback(() => {
221209
application.keyboardService.triggerCommand(CHANGE_EDITOR_WIDTH_COMMAND)
222210
}, [application.keyboardService])
@@ -468,13 +456,7 @@ const NotesOptions = ({ notes, closeMenu }: NotesOptionsProps) => {
468456

469457
{notes.length === 1 && (
470458
<>
471-
{notes[0].noteType === NoteType.Super && (
472-
<SuperNoteOptions
473-
note={notes[0]}
474-
markdownShortcut={markdownShortcut}
475-
enableSuperMarkdownPreview={enableSuperMarkdownPreview}
476-
/>
477-
)}
459+
{notes[0].noteType === NoteType.Super && <SuperNoteOptions closeMenu={closeMenu} />}
478460

479461
{!areSomeNotesInSharedVault && (
480462
<MenuSection>

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

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,42 @@
1-
import { SNNote } from '@standardnotes/snjs'
2-
import { PlatformedKeyboardShortcut } from '@standardnotes/ui-services'
31
import Icon from '../Icon/Icon'
42
import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator'
53
import MenuItem from '../Menu/MenuItem'
64
import { iconClass } from './ClassNames'
75
import MenuSection from '../Menu/MenuSection'
6+
import { SUPER_SHOW_MARKDOWN_PREVIEW, SUPER_TOGGLE_SEARCH } from '@standardnotes/ui-services'
7+
import { useMemo, useCallback } from 'react'
8+
import { useCommandService } from '../CommandProvider'
89

910
type Props = {
10-
note: SNNote
11-
markdownShortcut?: PlatformedKeyboardShortcut
12-
enableSuperMarkdownPreview: () => void
11+
closeMenu: () => void
1312
}
1413

15-
const SuperNoteOptions = ({ markdownShortcut, enableSuperMarkdownPreview }: Props) => {
14+
const SuperNoteOptions = ({ closeMenu }: Props) => {
15+
const commandService = useCommandService()
16+
17+
const markdownShortcut = useMemo(
18+
() => commandService.keyboardShortcutForCommand(SUPER_SHOW_MARKDOWN_PREVIEW),
19+
[commandService],
20+
)
21+
22+
const findShortcut = useMemo(() => commandService.keyboardShortcutForCommand(SUPER_TOGGLE_SEARCH), [commandService])
23+
24+
const enableSuperMarkdownPreview = useCallback(() => {
25+
commandService.triggerCommand(SUPER_SHOW_MARKDOWN_PREVIEW)
26+
}, [commandService])
27+
28+
const findInNote = useCallback(() => {
29+
commandService.triggerCommand(SUPER_TOGGLE_SEARCH)
30+
closeMenu()
31+
}, [closeMenu, commandService])
32+
1633
return (
1734
<MenuSection>
35+
<MenuItem onClick={findInNote}>
36+
<Icon type="search" className={iconClass} />
37+
Find in note
38+
{findShortcut && <KeyboardShortcutIndicator className="ml-auto" shortcut={findShortcut} />}
39+
</MenuItem>
1840
<MenuItem onClick={enableSuperMarkdownPreview}>
1941
<Icon type="markdown" className={iconClass} />
2042
Show Markdown

‎packages/web/src/javascripts/Components/SuperEditor/Plugins/SearchPlugin/SearchDialog.tsx‎

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,11 @@ import {
1414
import { classNames } from '@standardnotes/utils'
1515
import { useCallback, useMemo, useState } from 'react'
1616
import { useSuperSearchContext } from './Context'
17+
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
1718

1819
export const SearchDialog = ({ open, closeDialog }: { open: boolean; closeDialog: () => void }) => {
20+
const [editor] = useLexicalComposerContext()
21+
1922
const { query, results, currentResultIndex, isCaseSensitive, isReplaceMode, dispatch, dispatchReplaceEvent } =
2023
useSuperSearchContext()
2124

@@ -53,22 +56,27 @@ export const SearchDialog = ({ open, closeDialog }: { open: boolean; closeDialog
5356

5457
return (
5558
<div
56-
className="absolute right-6 top-13 z-10 flex select-none rounded border border-border bg-default"
59+
className={classNames(
60+
'absolute left-2 right-6 top-2 z-10 flex select-none rounded border border-border bg-default md:left-auto',
61+
editor.isEditable() ? 'md:top-13' : 'md:top-3',
62+
)}
5763
ref={setElement}
5864
>
59-
<button
60-
className="focus:ring-none border-r border-border px-1 hover:bg-contrast focus:shadow-inner focus:shadow-info"
61-
onClick={() => {
62-
dispatch({ type: 'toggle-replace-mode' })
63-
}}
64-
title={`Toggle Replace Mode (${toggleReplaceShortcut})`}
65-
>
66-
{isReplaceMode ? (
67-
<ArrowDownIcon className="h-4 w-4 fill-text" />
68-
) : (
69-
<ArrowRightIcon className="h-4 w-4 fill-text" />
70-
)}
71-
</button>
65+
{editor.isEditable() && (
66+
<button
67+
className="focus:ring-none border-r border-border px-1 hover:bg-contrast focus:shadow-inner focus:shadow-info"
68+
onClick={() => {
69+
dispatch({ type: 'toggle-replace-mode' })
70+
}}
71+
title={`Toggle Replace Mode (${toggleReplaceShortcut})`}
72+
>
73+
{isReplaceMode ? (
74+
<ArrowDownIcon className="h-4 w-4 fill-text" />
75+
) : (
76+
<ArrowRightIcon className="h-4 w-4 fill-text" />
77+
)}
78+
</button>
79+
)}
7280
<div
7381
className="flex flex-col gap-2 px-2 py-2"
7482
onKeyDown={(event) => {
@@ -171,7 +179,7 @@ export const SearchDialog = ({ open, closeDialog }: { open: boolean; closeDialog
171179
</button>
172180
</div>
173181
{isReplaceMode && (
174-
<div className="flex items-center gap-2">
182+
<div className="flex flex-wrap items-center gap-2 md:flex-nowrap">
175183
<input
176184
type="text"
177185
placeholder="Replace"

‎packages/web/src/javascripts/Components/SuperEditor/Plugins/SearchPlugin/SearchPlugin.tsx‎

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -28,34 +28,23 @@ export const SearchPlugin = () => {
2828
const resultsRef = useStateRef(results)
2929

3030
useEffect(() => {
31-
const isFocusInEditor = () => {
32-
if (!document.activeElement || !document.activeElement.closest('.blocks-editor')) {
33-
return false
34-
}
35-
return true
36-
}
37-
3831
return application.keyboardService.addCommandHandlers([
3932
{
4033
command: SUPER_TOGGLE_SEARCH,
4134
category: 'Super notes',
4235
description: 'Search in current note',
4336
onKeyDown: (event) => {
44-
if (!isFocusInEditor()) {
45-
return
46-
}
4737
event.preventDefault()
4838
event.stopPropagation()
4939
dispatch({ type: 'toggle-search' })
50-
editor.focus()
5140
},
5241
},
5342
{
5443
command: SUPER_SEARCH_TOGGLE_REPLACE_MODE,
5544
category: 'Super notes',
5645
description: 'Search and replace in current note',
5746
onKeyDown: (event) => {
58-
if (!isFocusInEditor()) {
47+
if (!editor.isEditable()) {
5948
return
6049
}
6150
event.preventDefault()
@@ -66,9 +55,6 @@ export const SearchPlugin = () => {
6655
{
6756
command: SUPER_SEARCH_TOGGLE_CASE_SENSITIVE,
6857
onKeyDown() {
69-
if (!isFocusInEditor()) {
70-
return
71-
}
7258
dispatch({
7359
type: 'toggle-case-sensitive',
7460
})
@@ -79,9 +65,6 @@ export const SearchPlugin = () => {
7965
category: 'Super notes',
8066
description: 'Go to next search result',
8167
onKeyDown(event) {
82-
if (!isFocusInEditor()) {
83-
return
84-
}
8568
event.preventDefault()
8669
event.stopPropagation()
8770
dispatch({
@@ -94,9 +77,6 @@ export const SearchPlugin = () => {
9477
category: 'Super notes',
9578
description: 'Go to previous search result',
9679
onKeyDown(event) {
97-
if (!isFocusInEditor()) {
98-
return
99-
}
10080
event.preventDefault()
10181
event.stopPropagation()
10282
dispatch({

0 commit comments

Comments
 (0)