Merge branch 'hotkeys' into 'develop'

Temporarily disable hotkeys

Closes #1515

See merge request soapbox-pub/soapbox!2676

app/soapbox/components/status.tsx

@@ -1,6 +1,5 @@
 import clsx from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
-import { HotKeys } from 'react-hotkeys';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
@@ -11,6 +10,7 @@ import { toggleStatusHidden, unfilterStatus } from 'soapbox/actions/statuses';
 import TranslateButton from 'soapbox/components/translate-button';
 import AccountContainer from 'soapbox/containers/account-container';
 import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container';
+import { HotKeys } from 'soapbox/features/ui/components/hotkeys';
 import { useAppDispatch, useSettings } from 'soapbox/hooks';
 import { defaultMediaVisibility, textForScreenReader, getActualStatus } from 'soapbox/utils/status';
 

app/soapbox/components/tombstone.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { HotKeys } from 'react-hotkeys';
 import { FormattedMessage } from 'react-intl';
 
 import { Text } from 'soapbox/components/ui';
+import { HotKeys } from 'soapbox/features/ui/components/hotkeys';
 
 interface ITombstone {
   id: string

app/soapbox/features/feed-suggestions/feed-suggestions.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { HotKeys } from 'react-hotkeys';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
@@ -9,6 +8,7 @@ import { useAppSelector } from 'soapbox/hooks';
 
 import { Card, CardBody, CardTitle, HStack, Stack, Text } from '../../components/ui';
 import ActionButton from '../ui/components/action-button';
+import { HotKeys } from '../ui/components/hotkeys';
 
 const messages = defineMessages({
   heading: { id: 'feed_suggestions.heading', defaultMessage: 'Suggested Profiles' },

app/soapbox/features/notifications/components/notification.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback } from 'react';
-import { HotKeys } from 'react-hotkeys';
 import { defineMessages, useIntl, FormattedMessage, IntlShape, MessageDescriptor, defineMessage } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
@@ -12,6 +11,7 @@ import Icon from 'soapbox/components/icon';
 import { HStack, Text, Emoji } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account-container';
 import StatusContainer from 'soapbox/containers/status-container';
+import { HotKeys } from 'soapbox/features/ui/components/hotkeys';
 import { useAppDispatch, useAppSelector, useInstance } from 'soapbox/hooks';
 import { makeGetNotification } from 'soapbox/selectors';
 import { NotificationType, validType } from 'soapbox/utils/notification';

app/soapbox/features/status/components/thread.tsx

@@ -2,7 +2,6 @@ import { createSelector } from '@reduxjs/toolkit';
 import clsx from 'clsx';
 import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
 import React, { useEffect, useRef, useState } from 'react';
-import { HotKeys } from 'react-hotkeys';
 import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import { type VirtuosoHandle } from 'react-virtuoso';
@@ -17,6 +16,7 @@ import StatusActionBar from 'soapbox/components/status-action-bar';
 import Tombstone from 'soapbox/components/tombstone';
 import { Stack } from 'soapbox/components/ui';
 import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status';
+import { HotKeys } from 'soapbox/features/ui/components/hotkeys';
 import PendingStatus from 'soapbox/features/ui/components/pending-status';
 import { useAppDispatch, useAppSelector, useOwnAccount, useSettings } from 'soapbox/hooks';
 import { RootState } from 'soapbox/store';

app/soapbox/features/ui/components/hotkeys.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { HotKeys as _HotKeys } from 'react-hotkeys';
+
+type IHotKeys = React.ComponentProps<typeof _HotKeys>;
+
+/**
+ * Wrapper component around `react-hotkeys`.
+ * `react-hotkeys` is a legacy component, so confining its import to one place is beneficial.
+ *
+ * NOTE: Temporarily disabled due to incompatibility with Vite.
+ */
+const HotKeys = React.forwardRef<any, IHotKeys>(({ children, ...rest }, ref) => {
+  // return (
+  //   <_HotKeys {...rest} ref={ref}>
+  //     {children}
+  //   </_HotKeys>
+  // );
+
+  return <>{children}</>;
+});
+
+export { HotKeys, type IHotKeys };

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

@@ -1,11 +1,12 @@
 import React, { useRef } from 'react';
-import { HotKeys } from 'react-hotkeys';
 import { useHistory } from 'react-router-dom';
 
 import { resetCompose } from 'soapbox/actions/compose';
 import { openModal } from 'soapbox/actions/modals';
 import { useAppSelector, useAppDispatch, useOwnAccount } from 'soapbox/hooks';
 
+import { HotKeys } from '../components/hotkeys';
+
 const keyMap = {
   help: '?',
   new: 'n',
@@ -83,7 +84,7 @@ const GlobalHotkeys: React.FC<IGlobalHotkeys> = ({ children, node }) => {
     }
   };
 
-  const setHotkeysRef: React.LegacyRef<HotKeys> = (c: any) => {
+  const setHotkeysRef: React.LegacyRef<typeof HotKeys> = (c: any) => {
     hotkeys.current = c;
 
     if (!me || !hotkeys.current) return;