fix(iOS): actually fix context menus

closes #138

src/components/common/IconBase.tsx

@@ -1,6 +1,8 @@
 import { Attachment } from "revolt-api/types/Autumn";
 import styled, { css } from "styled-components/macro";
 
+import { Ref } from "preact";
+
 export interface IconBaseProps<T> {
     target?: T;
     url?: string;
@@ -9,6 +11,8 @@ export interface IconBaseProps<T> {
     size: number;
     hover?: boolean;
     animate?: boolean;
+
+    innerRef?: Ref<any>;
 }
 
 interface IconModifiers {

src/components/common/messaging/Message.tsx

@@ -1,7 +1,8 @@
 import { observer } from "mobx-react-lite";
 import { Message as MessageObject } from "revolt.js/dist/maps/Messages";
 
-import { attachContextMenu } from "preact-context-menu";
+import { Ref } from "preact";
+import { refContextMenu } from "preact-context-menu";
 import { memo } from "preact/compat";
 import { useEffect, useState } from "preact/hooks";
 
@@ -64,7 +65,7 @@ const Message = observer(
         // ! TODO: tell fatal to make this type generic
         // bree: Fatal please...
         const userContext = attachContext
-            ? (attachContextMenu("Menu", {
+            ? (refContextMenu("Menu", {
                   user: message.author_id,
                   contextualChannel: message.channel_id,
                   // eslint-disable-next-line
@@ -119,13 +120,13 @@ const Message = observer(
                     sending={typeof queued !== "undefined"}
                     mention={message.mention_ids?.includes(client.user!._id)}
                     failed={typeof queued?.error !== "undefined"}
-                    onContextMenu={
+                    ref={
                         attachContext
-                            ? attachContextMenu("Menu", {
+                            ? (refContextMenu("Menu", {
                                   message,
                                   contextualChannel: message.channel_id,
                                   queued,
-                              })
+                              }) as Ref<HTMLDivElement>)
                             : undefined
                     }
                     onMouseEnter={() => setAnimate(true)}
@@ -137,7 +138,7 @@ const Message = observer(
                                 url={message.generateMasqAvatarURL()}
                                 target={user}
                                 size={36}
-                                onContextMenu={userContext}
+                                innerRef={userContext}
                                 onClick={handleUserClick}
                                 animate={mouseHovering}
                                 showServerIdentity
@@ -154,7 +155,7 @@ const Message = observer(
                                     className="author"
                                     showServerIdentity
                                     onClick={handleUserClick}
-                                    onContextMenu={userContext}
+                                    innerRef={userContext}
                                     masquerade={message.masquerade!}
                                 />
                                 <MessageDetail

src/components/common/messaging/SystemMessage.tsx

@@ -15,7 +15,8 @@ import { SystemMessage as SystemMessageI } from "revolt-api/types/Channels";
 import { Message } from "revolt.js/dist/maps/Messages";
 import styled from "styled-components/macro";
 
-import { attachContextMenu } from "preact-context-menu";
+import { Ref } from "preact";
+import { refContextMenu } from "preact-context-menu";
 
 import { TextReact } from "../../../lib/i18n";
 
@@ -138,12 +139,12 @@ export const SystemMessage = observer(
         return (
             <MessageBase
                 highlight={highlight}
-                onContextMenu={
+                ref={
                     attachContext
-                        ? attachContextMenu("Menu", {
+                        ? (refContextMenu("Menu", {
                               message,
                               contextualChannel: message.channel,
-                          })
+                          }) as Ref<HTMLDivElement>)
                         : undefined
                 }>
                 {!hideInfo && (

src/components/common/messaging/attachments/Attachment.tsx

@@ -2,7 +2,7 @@ import { Attachment as AttachmentI } from "revolt-api/types/Autumn";
 
 import styles from "./Attachment.module.scss";
 import classNames from "classnames";
-import { attachContextMenu } from "preact-context-menu";
+import { refContextMenu } from "preact-context-menu";
 import { useContext, useState } from "preact/hooks";
 
 import { AppContext } from "../../../../context/revoltjs/RevoltClient";
@@ -37,7 +37,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
                 <SizedGrid
                     width={metadata.width}
                     height={metadata.height}
-                    onContextMenu={attachContextMenu("Menu", {
+                    innerRef={refContextMenu("Menu", {
                         attachment,
                     })}
                     className={classNames({

src/components/common/messaging/attachments/Grid.tsx

@@ -1,5 +1,7 @@
 import styled from "styled-components/macro";
 
+import { Ref } from "preact";
+
 import { Children } from "../../../../types/Preact";
 
 const Grid = styled.div<{ width: number; height: number }>`
@@ -71,13 +73,14 @@ type Props = Omit<
     children?: Children;
     width: number;
     height: number;
+    innerRef?: Ref<any>;
 };
 
 export function SizedGrid(props: Props) {
-    const { width, height, children, ...divProps } = props;
+    const { width, height, children, innerRef, ...divProps } = props;
 
     return (
-        <Grid {...divProps} width={width} height={height}>
+        <Grid {...divProps} width={width} height={height} ref={innerRef}>
             {children}
         </Grid>
     );

src/components/common/user/UserIcon.tsx

@@ -70,6 +70,7 @@ export default observer(
             hover,
             showServerIdentity,
             masquerade,
+            innerRef,
             ...svgProps
         } = props;
 
@@ -103,6 +104,7 @@ export default observer(
         return (
             <IconBase
                 {...svgProps}
+                ref={innerRef}
                 width={size}
                 height={size}
                 hover={hover}

src/components/common/user/UserShort.tsx

@@ -5,6 +5,7 @@ import { User } from "revolt.js/dist/maps/Users";
 import { Nullable } from "revolt.js/dist/util/null";
 import styled from "styled-components/macro";
 
+import { Ref } from "preact";
 import { Text } from "preact-i18n";
 
 import { internalEmit } from "../../../lib/eventEmitter";
@@ -33,6 +34,8 @@ type UsernameProps = JSX.HTMLAttributes<HTMLElement> & {
     prefixAt?: boolean;
     masquerade?: Masquerade;
     showServerIdentity?: boolean | "both";
+
+    innerRef?: Ref<any>;
 };
 
 export const Username = observer(
@@ -41,6 +44,7 @@ export const Username = observer(
         prefixAt,
         masquerade,
         showServerIdentity,
+        innerRef,
         ...otherProps
     }: UsernameProps) => {
         let username = user?.username;
@@ -83,7 +87,7 @@ export const Username = observer(
         if (user?.bot) {
             return (
                 <>
-                    <span {...otherProps} style={{ color }}>
+                    <span {...otherProps} ref={innerRef} style={{ color }}>
                         {masquerade?.name ?? username ?? (
                             <Text id="app.main.channel.unknown_user" />
                         )}
@@ -96,7 +100,7 @@ export const Username = observer(
         }
 
         return (
-            <span {...otherProps} style={{ color }}>
+            <span {...otherProps} ref={innerRef} style={{ color }}>
                 {prefixAt ? "@" : undefined}
                 {masquerade?.name ?? username ?? (
                     <Text id="app.main.channel.unknown_user" />