From 18268b8655edd13ea14e4c87e6f1580a39e31ea7 Mon Sep 17 00:00:00 2001 From: Huey Date: Wed, 1 Jun 2022 13:27:21 +0800 Subject: [PATCH] feat: add ctrl+space keyboard shortcut resolves #49 --- src/Options/Options.tsx | 18 +++++++ src/Options/components/KeyboardShortcut.tsx | 57 +++++++++++++++++++++ src/Popup/ExternalLinks.tsx | 2 +- src/Popup/Popup.tsx | 4 ++ src/Popup/hooks/useFocusInput.ts | 15 ++++++ src/Popup/hooks/usePopup.ts | 37 +++++++------ src/manifest.json | 8 +++ src/pages/Guide/Guide.tsx | 7 ++- src/styles/tailwind.css | 7 +++ 9 files changed, 137 insertions(+), 18 deletions(-) create mode 100644 src/Options/components/KeyboardShortcut.tsx create mode 100644 src/Popup/hooks/useFocusInput.ts diff --git a/src/Options/Options.tsx b/src/Options/Options.tsx index 42af342..50e4c93 100644 --- a/src/Options/Options.tsx +++ b/src/Options/Options.tsx @@ -1,9 +1,11 @@ import React, { useCallback, useEffect, useState } from 'react' +import { browser } from 'webextension-polyfill-ts' import OptionsStorage, { OptionShortName, OptionStorageContentType } from '../utils/OptionsStorage' import Highlight from './components/Highlight' import Institution from './components/Institution' import ClipboardPaste from './components/ClipboardPaste' import 'styles/tailwind.css' +import KeyboardShortcut from './components/KeyboardShortcut' type ThenArgument = T extends PromiseLike ? U : T export type updateOptionsType = ( @@ -54,6 +56,22 @@ const Options: React.FC = () => { value={OPTIONS_CLIPBOARD_PASTE_ENABLED} updateOptions={updateOptions} /> + + + +

+ To open the Welcome Guide again, click  + + here + + . +

+ ) diff --git a/src/Options/components/KeyboardShortcut.tsx b/src/Options/components/KeyboardShortcut.tsx new file mode 100644 index 0000000..94ddaeb --- /dev/null +++ b/src/Options/components/KeyboardShortcut.tsx @@ -0,0 +1,57 @@ +import React from 'react' +import Browser from 'utils/Browser' + +const KeyboardShortcut = () => { + return ( +
+
+ Keyboard shortcut + +
+
+ ) +} + +export default KeyboardShortcut \ No newline at end of file diff --git a/src/Popup/ExternalLinks.tsx b/src/Popup/ExternalLinks.tsx index ffba028..8c879e3 100644 --- a/src/Popup/ExternalLinks.tsx +++ b/src/Popup/ExternalLinks.tsx @@ -63,7 +63,7 @@ const ExternalLinks: React.FC = ({ }, []) return ( -
+
Search on:
{ setIsSearching, setSearchResult, }) + const inputReference = useFocusInput() + const supportedJurisdictions = Constants.JURISDICTIONS @@ -54,6 +57,7 @@ const Popup: React.FC = () => { />
{ + const inputReference = useRef(null) + + useEffect(() => { + if (inputReference.current) { + inputReference.current.focus() + } + }, []) + + return inputReference +} + +export default useFocusInput \ No newline at end of file diff --git a/src/Popup/hooks/usePopup.ts b/src/Popup/hooks/usePopup.ts index 2663281..a7bb3b0 100644 --- a/src/Popup/hooks/usePopup.ts +++ b/src/Popup/hooks/usePopup.ts @@ -21,12 +21,24 @@ const usePopup = ({ search, setIsSearching, setSearchResult }) => { const [selectedJurisdiction, setSelectedJurisdiction] = useState(Constants.JURISDICTIONS.UK.id) const storeQuery = useCallback((value: string) => Storage.set(keys.QUERY, value), []) + const onChangeJurisdiction = useCallback(( + value, + doNotStore: boolean = false, + ): void => { + setSelectedJurisdiction(value) + if(!doNotStore){ + Storage.set(keys.SELECTED_JURISDICTION, value) + } + setLastSearchQuery(``) + setSearchResult([] as SearchResult[]) + }, [setSearchResult]) + const autosetJurisdiction = useCallback((value: string) => { const citations = Finder.findCaseCitation(value) if(citations.length > 0){ - setSelectedJurisdiction(citations[0].jurisdiction) + onChangeJurisdiction(citations[0].jurisdiction) } - }, []) + }, [onChangeJurisdiction]) // eslint-disable-next-line react-hooks/exhaustive-deps const debouncedViewCitation = useCallback(Helpers.debounce(search, 500), [search]) @@ -44,11 +56,16 @@ const usePopup = ({ search, setIsSearching, setSearchResult }) => { const onSearchQueryChange = useCallback(( { target: { value }}, doNotStore = false, + debounceAutosetJurisdiction = true, ) => { setQuery(value) setIsSearching(false) setSearchResult([] as SearchResult[]) - debouncedAutosetJurisdiction(value) + if(debounceAutosetJurisdiction){ + debouncedAutosetJurisdiction(value) + } else { + autosetJurisdiction(value) + } if(!doNotStore){ debouncedStoreQuery(value) } @@ -86,18 +103,6 @@ const usePopup = ({ search, setIsSearching, setSearchResult }) => { // }) // }, []) - const onChangeJurisdiction = useCallback(( - value, - doNotStore: boolean = false, - ): void => { - setSelectedJurisdiction(value) - if(!doNotStore){ - Storage.set(keys.SELECTED_JURISDICTION, value) - } - setLastSearchQuery(``) - setSearchResult([] as SearchResult[]) - }, [setSearchResult]) - const applyClipboardText = useCallback((clipboardText) => { onSearchQueryChange({target: { value: clipboardText }}) doSearch({ inputQuery: clipboardText }) @@ -110,7 +115,7 @@ const usePopup = ({ search, setIsSearching, setSearchResult }) => { const storedQuery = await Storage.get(keys.QUERY) if(query.length === 0 && storedQuery !== null && storedQuery.length > 0){ - onSearchQueryChange({target: { value: storedQuery }}, true) + onSearchQueryChange({target: { value: storedQuery }}, true, false) shouldDoSearch = true } const storedJurisdiction = await Storage.get(keys.SELECTED_JURISDICTION) diff --git a/src/manifest.json b/src/manifest.json index aa59edc..58735c7 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -229,6 +229,14 @@ "default_title": "Clerkent", "default_popup": "popup.html" }, + "commands": { + "_execute_browser_action": { + "suggested_key": { + "default": "Ctrl+Space" + }, + "description": "Open the Clerkent search popup" + } + }, "web_accessible_resources": [ "assets/icons/pdf.svg", "assets/clerkent.png" diff --git a/src/pages/Guide/Guide.tsx b/src/pages/Guide/Guide.tsx index d6f135b..b2e1776 100644 --- a/src/pages/Guide/Guide.tsx +++ b/src/pages/Guide/Guide.tsx @@ -18,8 +18,13 @@ const Guide = () => {

It should now appear in your browser toolbar (at the top-right corner of your browser window). - Click the Clerkent icon and try searching for something (e.g. "carbolic smoke ball"). + Click the Clerkent icon and try searching for something (e.g. "[1892] EWCA Civ 1").

+ +

+ You can also open the search popup via the keyboard shortcut CtrlSpace. +

+
↗️ (somewhere here) diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css index 3cb66e7..e16d4d7 100644 --- a/src/styles/tailwind.css +++ b/src/styles/tailwind.css @@ -62,6 +62,13 @@ .clerkent.case > .clerkent-tooltip { @apply hidden hover:block; } */ + + kbd { + @apply border border-solid border-gray-300 rounded bg-gray-100 p-0.5; + } + kbd + kbd { + @apply ml-1; + } } @keyframes lds-ellipsis1 {