Merge branch 'hotkeys-statuses' into 'develop'

Move GlobalHotkeys back to features/ui for now

See merge request soapbox-pub/soapbox!2593

app/soapbox/containers/soapbox.tsx

@@ -29,7 +29,6 @@ import {
   OnboardingWizard,
   WaitlistPage,
 } from 'soapbox/features/ui/util/async-components';
-import GlobalHotkeys from 'soapbox/features/ui/util/global-hotkeys';
 import { createGlobals } from 'soapbox/globals';
 import {
   useAppSelector,
@@ -176,7 +175,6 @@ const SoapboxMount = () => {
       <BrowserRouter basename={BuildConfig.FE_SUBDIRECTORY}>
         <CompatRouter>
           <ScrollContext shouldUpdateScroll={shouldUpdateScroll}>
-            <GlobalHotkeys>
             <Switch>
               <Route
                 path='/embed/:statusId'
@@ -202,7 +200,6 @@ const SoapboxMount = () => {
                 </div>
               </Route>
             </Switch>
-            </GlobalHotkeys>
           </ScrollContext>
         </CompatRouter>
       </BrowserRouter>

app/soapbox/features/ui/index.tsx

@@ -135,6 +135,7 @@ import {
   EditGroup,
   FollowedTags,
 } from './util/async-components';
+import GlobalHotkeys from './util/global-hotkeys';
 import { WrappedRoute } from './util/react-router-helpers';
 
 // Dummy import, to make sure that <Status /> ends up in the application bundle.
@@ -511,6 +512,7 @@ const UI: React.FC<IUI> = ({ children }) => {
   };
 
   return (
+    <GlobalHotkeys node={node}>
       <div ref={node} style={style}>
         <div
           className={clsx('pointer-events-none fixed z-[90] h-screen w-screen transition', {
@@ -565,6 +567,7 @@ const UI: React.FC<IUI> = ({ children }) => {
           </BundleContainer>
         </div>
       </div>
+    </GlobalHotkeys>
   );
 };
 

app/soapbox/features/ui/util/global-hotkeys.tsx

@@ -36,9 +36,10 @@ const keyMap = {
 
 interface IGlobalHotkeys {
   children: React.ReactNode
+  node: React.MutableRefObject<HTMLDivElement | null>
 }
 
-const GlobalHotkeys: React.FC<IGlobalHotkeys> = ({ children }) => {
+const GlobalHotkeys: React.FC<IGlobalHotkeys> = ({ children, node }) => {
   const hotkeys = useRef<HTMLDivElement | null>(null);
 
   const history = useHistory();
@@ -48,9 +49,9 @@ const GlobalHotkeys: React.FC<IGlobalHotkeys> = ({ children }) => {
 
   const handleHotkeyNew = (e?: KeyboardEvent) => {
     e?.preventDefault();
-    if (!hotkeys.current) return;
+    if (!node.current) return;
 
-    const element = hotkeys.current.querySelector('textarea#compose-textarea') as HTMLTextAreaElement;
+    const element = node.current.querySelector('textarea#compose-textarea') as HTMLTextAreaElement;
 
     if (element) {
       element.focus();
@@ -59,9 +60,9 @@ const GlobalHotkeys: React.FC<IGlobalHotkeys> = ({ children }) => {
 
   const handleHotkeySearch = (e?: KeyboardEvent) => {
     e?.preventDefault();
-    if (!hotkeys.current) return;
+    if (!node.current) return;
 
-    const element = hotkeys.current.querySelector('input#search') as HTMLInputElement;
+    const element = node.current.querySelector('input#search') as HTMLInputElement;
 
     if (element) {
       element.focus();