onSelectedIndexChanged(index)}
24 | onPointerDown={() => onSelectedIndexChanged(index)}
25 | onPointerUp={onSearchResultChosen}
26 | data-search-result-index={index}
27 | className={`suggestion-item mod-complex ${isSelected ? "is-selected" : ""}`}
28 | >
29 |
30 |
31 | {searchResult.getBeforeMatchSubstring()}
32 | {searchResult.getMatchSubstring()}
33 | {searchResult.getAfterMatchSubstring()}
34 |
35 |
36 |
37 |
38 | {searchResult.filePath}
39 |
40 | {searchResult.lineNumber}
41 |
42 |
43 | );
44 | }
45 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | .snr-line-number {
2 | font-size: var(--font-ui-small);
3 | }
4 |
5 | .snr-suggestion-content {
6 | /* Nothing */
7 | }
8 |
9 | .snr-suggestion-flair {
10 | word-break: break-word;
11 | }
12 |
13 | .snr-suggestion-aux {
14 | max-width: 40%;
15 | }
16 |
17 | .snr-highlight {
18 | color: var(--text-normal);
19 | background-color: var(--text-highlight-bg);
20 | }
21 |
22 | .snr-input-button-wrapper {
23 | /*margin-top: var(--size-4-2);*/
24 | /*margin-bottom: var(--size-4-2);*/
25 | display: flex;
26 | justify-content: space-between;
27 | align-items: center;
28 | gap: var(--size-4-4);
29 | border-bottom: 1px solid var(--background-secondary);
30 | }
31 |
32 | .snr-input-button-wrapper > button {
33 | margin-right: var(--size-4-4);
34 | }
35 |
36 |
37 | .is-phone .snr-input-button-wrapper > button {
38 | margin-right: var(--size-4-4);
39 | width: unset;
40 | }
41 |
42 | .is-tablet .snr-input-button-wrapper > button {
43 | margin-right: var(--size-4-4);
44 | }
45 |
46 | .snr-input-icon-wrapper {
47 | display: flex;
48 | justify-content: space-between;
49 | align-items: center;
50 | border-bottom: 1px solid var(--background-secondary);
51 | }
52 |
53 | .snr-regex-button {
54 | margin-right: var(--size-4-4);
55 | }
56 |
57 | .snr-workspace-tab-header-inner {
58 | padding: var(--size-4-2);
59 | }
60 |
61 | .snr-workspace-tab-header-inner-icon-active {
62 | background-color: var(--background-modifier-form-field);
63 | }
64 |
65 | .snr-result-summary {
66 | border-top: 1px solid var(--background-secondary);
67 | user-select: none;
68 | font-size: var(--font-ui-smaller);
69 | color: var(--text-muted);
70 | padding: var(--size-4-2);
71 | display: flex;
72 | text-align: center;
73 | justify-content: center;
74 | }
75 |
--------------------------------------------------------------------------------
/src/react-components/use-search.ts:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { useCallback, useEffect, useMemo } from "react";
3 | import { FileOperator } from "../domain/file-operator";
4 | import { debounce } from "obsidian";
5 | import { SearchAndReplaceAction, SearchAndReplaceState } from "./SearchAndReplace";
6 | import { isBlank } from "../util/utils";
7 |
8 | export function useSearch(
9 | state: SearchAndReplaceState,
10 | dispatch: React.Dispatch