Skip to content

Commit

Permalink
feat: support disabling search bar shortcut
Browse files Browse the repository at this point in the history
  • Loading branch information
@weareoutman
weareoutman committed Jul 7, 2022
1 parent 44c8428 commit e0ea5ae
Show file tree
Hide file tree
Showing 8 changed files with 50 additions and 5 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ module.exports = {
| searchResultContextMaxLength | number | `50` | Set the max length of characters of each search result to show. |
| explicitSearchResultPath | boolean | false | Whether an explicit path to a heading should be presented on a suggestion template. |
| ignoreFiles | string \| RegExp \| (string \| RegExp)[] | /**meta**\$/ | Set the match rules to ignore some files. |
| searchBarShortcut | boolean | `true` | Whether to enable shortcut for focusing in search bar. |

### I18N

Expand Down
13 changes: 8 additions & 5 deletions docusaurus-search-local/src/client/theme/SearchBar/SearchBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { SearchSourceFactory } from "../../utils/SearchSourceFactory";
import { SuggestionTemplate } from "./SuggestionTemplate";
import { EmptyTemplate } from "./EmptyTemplate";
import { SearchResult } from "../../../shared/interfaces";
import { searchResultLimits, Mark } from "../../utils/proxiedGenerated";
import { searchResultLimits, Mark, searchBarShortcut } from "../../utils/proxiedGenerated";
import LoadingRing from "../LoadingRing/LoadingRing";

import styles from "./SearchBar.module.css";
Expand Down Expand Up @@ -237,14 +237,17 @@ export default function SearchBar({
: false;

useEffect(() => {
if (!searchBarShortcut) {
return;
}
// Add shortcuts command/ctrl + K
function handleShortcut(event: KeyboardEvent): void {
const handleShortcut = (event: KeyboardEvent): void => {
if ((isMac ? event.metaKey : event.ctrlKey) && event.code === "KeyK") {
event.preventDefault();
searchBarRef.current?.focus();
onInputFocus();
}
}
};

document.addEventListener("keydown", handleShortcut);
return () => {
Expand Down Expand Up @@ -291,7 +294,7 @@ export default function SearchBar({
value={inputValue}
/>
<LoadingRing className={styles.searchBarLoadingRing} />
{inputValue !== "" ? (
{searchBarShortcut && (inputValue !== "" ? (
<button className={styles.searchClearButton} onClick={onClearSearch}>
✕
</button>
Expand All @@ -300,7 +303,7 @@ export default function SearchBar({
<kbd className={styles.searchHint}>{isMac ? "⌘" : "ctrl"}</kbd>
<kbd className={styles.searchHint}>K</kbd>
</div>
)}
))}
</div>
);
}
1 change: 1 addition & 0 deletions docusaurus-search-local/src/declarations.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ declare module "*/generated.js" {
export const searchResultLimits: number;
export const searchResultContextMaxLength: number;
export const explicitSearchResultPath: boolean;
export const searchBarShortcut: boolean;
// These below are for mocking only.
export const __setLanguage: (value: string[]) => void;
export const __setRemoveDefaultStopWordFilter: (value: boolean) => void;
Expand Down
25 changes: 25 additions & 0 deletions docusaurus-search-local/src/server/utils/generate.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ describe("generate", () => {
"export const searchResultLimits = 8;",
"export const searchResultContextMaxLength = 50;",
"export const explicitSearchResultPath = false;",
"export const searchBarShortcut = true;",
],
],
[
Expand All @@ -45,6 +46,7 @@ describe("generate", () => {
"export const searchResultLimits = 8;",
"export const searchResultContextMaxLength = 50;",
"export const explicitSearchResultPath = false;",
"export const searchBarShortcut = true;",
],
],
[
Expand All @@ -65,6 +67,7 @@ describe("generate", () => {
"export const searchResultLimits = 8;",
"export const searchResultContextMaxLength = 50;",
"export const explicitSearchResultPath = false;",
"export const searchBarShortcut = true;",
],
],
[
Expand All @@ -88,6 +91,7 @@ describe("generate", () => {
"export const searchResultLimits = 8;",
"export const searchResultContextMaxLength = 50;",
"export const explicitSearchResultPath = false;",
"export const searchBarShortcut = true;",
],
],
[
Expand All @@ -109,6 +113,7 @@ describe("generate", () => {
"export const searchResultLimits = 8;",
"export const searchResultContextMaxLength = 50;",
"export const explicitSearchResultPath = false;",
"export const searchBarShortcut = true;",
],
],
[
Expand All @@ -133,6 +138,7 @@ describe("generate", () => {
"export const searchResultLimits = 8;",
"export const searchResultContextMaxLength = 50;",
"export const explicitSearchResultPath = false;",
"export const searchBarShortcut = true;",
],
],
])("generate({ language: %j }, dir) should work", (language, contents) => {
Expand All @@ -144,6 +150,7 @@ describe("generate", () => {
searchResultLimits: 8,
searchResultContextMaxLength: 50,
explicitSearchResultPath: false,
searchBarShortcut: true,
} as ProcessedPluginOptions,
"/tmp"
);
Expand Down Expand Up @@ -176,4 +183,22 @@ describe("generate", () => {
expect.stringContaining("export { default as Mark } from")
);
});

test("searchBarShortcut", () => {
generate(
{
language: ["en"],
removeDefaultStopWordFilter: false,
searchBarShortcut: false,
searchResultLimits: 8,
searchResultContextMaxLength: 50,
} as ProcessedPluginOptions,
"/tmp"
);

expect(mockWriteFileSync).toBeCalledWith(
"/tmp/generated.js",
expect.stringContaining("export const searchBarShortcut = false")
);
});
});
4 changes: 4 additions & 0 deletions docusaurus-search-local/src/server/utils/generate.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export function generate(config: ProcessedPluginOptions, dir: string): void {
searchResultLimits,
searchResultContextMaxLength,
explicitSearchResultPath,
searchBarShortcut,
} = config;
const indexHash = getIndexHash(config);
const contents: string[] = [
Expand Down Expand Up @@ -84,6 +85,9 @@ export function generate(config: ProcessedPluginOptions, dir: string): void {
explicitSearchResultPath
)};`
);
contents.push(
`export const searchBarShortcut = ${JSON.stringify(searchBarShortcut)};`
);

fs.writeFileSync(path.join(dir, "generated.js"), contents.join("\n"));
}
8 changes: 8 additions & 0 deletions docusaurus-search-local/src/server/utils/validateOptions.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ describe("validateOptions", () => {
explicitSearchResultPath: false,
searchResultContextMaxLength: 50,
ignoreFiles: [],
searchBarShortcut: true,
},
],
[
Expand All @@ -57,6 +58,7 @@ describe("validateOptions", () => {
explicitSearchResultPath: false,
searchResultContextMaxLength: 50,
ignoreFiles: "file1",
searchBarShortcut: true,
},
],
[
Expand All @@ -78,6 +80,7 @@ describe("validateOptions", () => {
explicitSearchResultPath: false,
searchResultContextMaxLength: 50,
ignoreFiles: [/__meta__$/, "file1"],
searchBarShortcut: true,
},
],
[
Expand All @@ -99,6 +102,7 @@ describe("validateOptions", () => {
explicitSearchResultPath: false,
searchResultContextMaxLength: 50,
ignoreFiles: [],
searchBarShortcut: true,
},
],
[
Expand All @@ -110,6 +114,7 @@ describe("validateOptions", () => {
searchResultLimits: 5,
explicitSearchResultPath: false,
searchResultContextMaxLength: 30,
searchBarShortcut: false,
},
{
blogRouteBasePath: ["blog"],
Expand All @@ -128,6 +133,7 @@ describe("validateOptions", () => {
explicitSearchResultPath: false,
searchResultContextMaxLength: 30,
ignoreFiles: [],
searchBarShortcut: false,
},
],
[
Expand All @@ -152,6 +158,7 @@ describe("validateOptions", () => {
explicitSearchResultPath: false,
searchResultContextMaxLength: 50,
ignoreFiles: [],
searchBarShortcut: true,
},
],
[
Expand All @@ -176,6 +183,7 @@ describe("validateOptions", () => {
explicitSearchResultPath: false,
searchResultContextMaxLength: 50,
ignoreFiles: [],
searchBarShortcut: true,
},
],
])("validateOptions(...) should work", (options, config) => {
Expand Down
1 change: 1 addition & 0 deletions docusaurus-search-local/src/server/utils/validateOptions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ const schema = Joi.object<PluginOptions>({
searchResultContextMaxLength: Joi.number().default(50),
explicitSearchResultPath: Joi.boolean().default(false),
ignoreFiles: isArrayOfStringsOrRegExpsOrStringOrRegExp.default([]),
searchBarShortcut: Joi.boolean().default(true),
});

export function validateOptions({
Expand Down
2 changes: 2 additions & 0 deletions docusaurus-search-local/src/shared/interfaces.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,8 @@ export interface PluginOptions {

ignoreFiles?: string | RegExp | (string | RegExp)[];

searchBarShortcut?: boolean;

// searchInputPlaceholder?: string;
// searchNoResults?: string;
// searchSeeAllResults?: string;
Expand Down

0 comments on commit e0ea5ae

Please sign in to comment.