From 18761e2181be627705ced2eceea4721afc71c3bd Mon Sep 17 00:00:00 2001
From: Paul Makles <paulmakles@gmail.com>
Date: Sat, 5 Mar 2022 14:41:41 +0000
Subject: [PATCH] fix(iOS): actually fix context menus closes #138

---
 index.html                                    |  2 +-
 package.json                                  |  2 +-
 src/components/common/IconBase.tsx            |  4 +++
 src/components/common/messaging/Message.tsx   | 15 +++++-----
 .../common/messaging/SystemMessage.tsx        |  9 +++---
 .../messaging/attachments/Attachment.tsx      |  4 +--
 .../common/messaging/attachments/Grid.tsx     |  7 +++--
 src/components/common/user/UserIcon.tsx       |  2 ++
 src/components/common/user/UserShort.tsx      |  8 ++++--
 .../navigation/items/ButtonItem.tsx           | 27 ++++++++++--------
 .../navigation/left/ServerListSidebar.tsx     | 28 +++++++++++--------
 .../navigation/left/ServerSidebar.tsx         | 11 +++++---
 src/pages/friends/Friend.tsx                  |  9 ++++--
 vite.config.ts                                |  2 +-
 yarn.lock                                     | 21 ++++++--------
 15 files changed, 90 insertions(+), 61 deletions(-)
diff --git a/index.html b/index.html
index 9e33d725..1b17417e 100644
--- a/index.html
+++ b/index.html
@@ -127,7 +127,7 @@
             }
         </style>
     </head>
-    <body ontouchstart="">
+    <body>
         <div id="app"></div>
         <script type="module" src="/src/main.tsx"></script>
         <noscript>
diff --git a/package.json b/package.json
index 91dc5a61..86f59464 100644
--- a/package.json
+++ b/package.json
@@ -135,7 +135,7 @@
         "mobx": "^6.3.2",
         "mobx-react-lite": "^3.2.0",
         "preact": "^10.5.14",
-        "preact-context-menu": "0.2.2",
+        "preact-context-menu": "0.3.0-patch.0",
         "preact-i18n": "^2.4.0-preactx",
         "prettier": "^2.3.1",
         "prismjs": "^1.23.0",
diff --git a/src/components/common/IconBase.tsx b/src/components/common/IconBase.tsx
index 2bbfb8b9..3147a86d 100644
--- a/src/components/common/IconBase.tsx
+++ b/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 {
diff --git a/src/components/common/messaging/Message.tsx b/src/components/common/messaging/Message.tsx
index 7f64f65c..6cd1525c 100644
--- a/src/components/common/messaging/Message.tsx
+++ b/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
diff --git a/src/components/common/messaging/SystemMessage.tsx b/src/components/common/messaging/SystemMessage.tsx
index 66a84685..d99fdf6d 100644
--- a/src/components/common/messaging/SystemMessage.tsx
+++ b/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 && (
diff --git a/src/components/common/messaging/attachments/Attachment.tsx b/src/components/common/messaging/attachments/Attachment.tsx
index 4ac53214..3000b2b3 100644
--- a/src/components/common/messaging/attachments/Attachment.tsx
+++ b/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({
diff --git a/src/components/common/messaging/attachments/Grid.tsx b/src/components/common/messaging/attachments/Grid.tsx
index 6ebd2577..36faa5b0 100644
--- a/src/components/common/messaging/attachments/Grid.tsx
+++ b/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>
     );
diff --git a/src/components/common/user/UserIcon.tsx b/src/components/common/user/UserIcon.tsx
index 6ddb74c8..ae4df5de 100644
--- a/src/components/common/user/UserIcon.tsx
+++ b/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}
diff --git a/src/components/common/user/UserShort.tsx b/src/components/common/user/UserShort.tsx
index 0ef5ccf8..cd9603d8 100644
--- a/src/components/common/user/UserShort.tsx
+++ b/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" />
diff --git a/src/components/navigation/items/ButtonItem.tsx b/src/components/navigation/items/ButtonItem.tsx
index a9a7a895..9e7666f5 100644
--- a/src/components/navigation/items/ButtonItem.tsx
+++ b/src/components/navigation/items/ButtonItem.tsx
@@ -7,7 +7,8 @@ import { User } from "revolt.js/dist/maps/Users";
 
 import styles from "./Item.module.scss";
 import classNames from "classnames";
-import { attachContextMenu } from "preact-context-menu";
+import { Ref } from "preact";
+import { refContextMenu } from "preact-context-menu";
 import { Localizer, Text } from "preact-i18n";
 
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
@@ -66,12 +67,14 @@ export const UserButton = observer((props: UserProps) => {
                 typeof channel !== "undefined" ||
                 (user.online && user.status?.presence !== Presence.Invisible)
             }
-            onContextMenu={attachContextMenu("Menu", {
-                user: user._id,
-                channel: channel?._id,
-                unread: alert,
-                contextualChannel: context?._id,
-            })}>
+            ref={
+                refContextMenu("Menu", {
+                    user: user._id,
+                    channel: channel?._id,
+                    unread: alert,
+                    contextualChannel: context?._id,
+                }) as Ref<HTMLDivElement>
+            }>
             <UserIcon
                 className={styles.avatar}
                 target={user}
@@ -163,10 +166,12 @@ export const ChannelButton = observer((props: ChannelProps) => {
             data-muted={muted}
             aria-label={channel.name}
             className={classNames(styles.item, { [styles.compact]: compact })}
-            onContextMenu={attachContextMenu("Menu", {
-                channel: channel._id,
-                unread: !!alert,
-            })}>
+            ref={
+                refContextMenu("Menu", {
+                    channel: channel._id,
+                    unread: !!alert,
+                }) as Ref<HTMLDivElement>
+            }>
             <ChannelIcon
                 className={styles.avatar}
                 target={channel}
diff --git a/src/components/navigation/left/ServerListSidebar.tsx b/src/components/navigation/left/ServerListSidebar.tsx
index 7acbe3a9..45822b86 100644
--- a/src/components/navigation/left/ServerListSidebar.tsx
+++ b/src/components/navigation/left/ServerListSidebar.tsx
@@ -5,8 +5,8 @@ import { Link, useHistory, useLocation, useParams } from "react-router-dom";
 import { RelationshipStatus } from "revolt-api/types/Users";
 import styled, { css } from "styled-components/macro";
 
-import { attachContextMenu } from "preact-context-menu";
-import { Text } from "preact-i18n";
+import { Ref } from "preact";
+import { refContextMenu } from "preact-context-menu";
 
 import ConditionalLink from "../../../lib/ConditionalLink";
 import PaintCounter from "../../../lib/PaintCounter";
@@ -265,7 +265,9 @@ export default observer(() => {
                     <ServerEntry home active={homeActive}>
                         <Swoosh />
                         <div
-                            onContextMenu={attachContextMenu("Status")}
+                            ref={
+                                refContextMenu("Status") as Ref<HTMLDivElement>
+                            }
                             onClick={() =>
                                 homeActive && history.push("/settings")
                             }>
@@ -301,10 +303,12 @@ export default observer(() => {
                                 <ServerEntry
                                     home
                                     active={false}
-                                    onContextMenu={attachContextMenu("Menu", {
-                                        channel: x._id,
-                                        unread: true,
-                                    })}>
+                                    ref={
+                                        refContextMenu("Menu", {
+                                            channel: x._id,
+                                            unread: true,
+                                        }) as Ref<HTMLDivElement>
+                                    }>
                                     <div>
                                         <Icon
                                             size={42}
@@ -350,10 +354,12 @@ export default observer(() => {
                             to={state.layout.getServerPath(server._id)}>
                             <ServerEntry
                                 active={active}
-                                onContextMenu={attachContextMenu("Menu", {
-                                    server: server._id,
-                                    unread: isUnread,
-                                })}>
+                                ref={
+                                    refContextMenu("Menu", {
+                                        server: server._id,
+                                        unread: isUnread,
+                                    }) as Ref<HTMLDivElement>
+                                }>
                                 <Swoosh />
                                 <Tooltip
                                     content={server.name}
diff --git a/src/components/navigation/left/ServerSidebar.tsx b/src/components/navigation/left/ServerSidebar.tsx
index 06d3979b..cde1ce62 100644
--- a/src/components/navigation/left/ServerSidebar.tsx
+++ b/src/components/navigation/left/ServerSidebar.tsx
@@ -3,7 +3,8 @@ import { Redirect, useParams } from "react-router";
 import { Server } from "revolt.js/dist/maps/Servers";
 import styled, { css } from "styled-components/macro";
 
-import { attachContextMenu } from "preact-context-menu";
+import { Ref } from "preact";
+import { refContextMenu } from "preact-context-menu";
 import { useEffect } from "preact/hooks";
 
 import ConditionalLink from "../../../lib/ConditionalLink";
@@ -145,9 +146,11 @@ export default observer(() => {
             <ServerHeader server={server} />
             <ConnectionStatus />
             <ServerList
-                onContextMenu={attachContextMenu("Menu", {
-                    server_list: server._id,
-                })}>
+                ref={
+                    refContextMenu("Menu", {
+                        server_list: server._id,
+                    }) as Ref<HTMLDivElement>
+                }>
                 {elements}
             </ServerList>
             <PaintCounter small />
diff --git a/src/pages/friends/Friend.tsx b/src/pages/friends/Friend.tsx
index c52b10d4..e1782e7d 100644
--- a/src/pages/friends/Friend.tsx
+++ b/src/pages/friends/Friend.tsx
@@ -7,7 +7,8 @@ import { User } from "revolt.js/dist/maps/Users";
 
 import styles from "./Friend.module.scss";
 import classNames from "classnames";
-import { attachContextMenu } from "preact-context-menu";
+import { Ref } from "preact";
+import { refContextMenu } from "preact-context-menu";
 import { Text } from "preact-i18n";
 import { useContext } from "preact/hooks";
 
@@ -132,7 +133,11 @@ export const Friend = observer(({ user }: Props) => {
         <div
             className={styles.friend}
             onClick={() => openScreen({ id: "profile", user_id: user._id })}
-            onContextMenu={attachContextMenu("Menu", { user: user._id })}>
+            ref={
+                refContextMenu("Menu", {
+                    user: user._id,
+                }) as Ref<HTMLDivElement>
+            }>
             <UserIcon target={user} size={36} status />
             <div className={styles.name}>
                 <span>{user.username}</span>
diff --git a/vite.config.ts b/vite.config.ts
index 71b31d3b..ac9d95f1 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -124,6 +124,6 @@ export default defineConfig({
         },
     },
     optimizeDeps: {
-        exclude: ["revolt.js"],
+        exclude: ["revolt.js", "preact-context-menu"],
     },
 });
diff --git a/yarn.lock b/yarn.lock
index 6170cdba..b45e4d09 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2251,15 +2251,10 @@ camelize@^1.0.0:
   resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
   integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
 
-caniuse-lite@^1.0.30001251:
-  version "1.0.30001252"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001252.tgz#cb16e4e3dafe948fc4a9bb3307aea054b912019a"
-  integrity sha512-I56jhWDGMtdILQORdusxBOH+Nl/KgQSdDmpJezYddnAkVOmnoU8zwjTV9xAjMIYxr0iPreEAVylCGcmHCjfaOw==
-
-caniuse-lite@^1.0.30001286:
-  version "1.0.30001299"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001299.tgz#d753bf6444ed401eb503cbbe17aa3e1451b5a68c"
-  integrity sha512-iujN4+x7QzqA2NCSrS5VUy+4gLmRd4xv6vbBBsmfVqTx8bLAD8097euLqQgKxSVLvxjSDcvF1T/i9ocgnUFexw==
+caniuse-lite@^1.0.30001251, caniuse-lite@^1.0.30001286:
+  version "1.0.30001313"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001313.tgz"
+  integrity sha512-rI1UN0koZUiKINjysQDuRi2VeSCce3bYJNmDcj3PIKREiAmjakugBul1QSkg/fPrlULYl6oWfGg3PbgOSY9X4Q==
 
 chalk@^2.0.0, chalk@^2.4.2:
   version "2.4.2"
@@ -4004,10 +3999,10 @@ postcss@^8.3.8:
     picocolors "^1.0.0"
     source-map-js "^0.6.2"
 
-preact-context-menu@0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/preact-context-menu/-/preact-context-menu-0.2.2.tgz#0092c3bbbdf7d4a958d2feecbaa47d97c3d552c8"
-  integrity sha512-qFUUa5ygjYzta6F96NCGpwmoZU+AKHg3SYb8yOCkJGzr8Dqv13P5NY7aZp6eVztxjpJCpF4ILFr1nOcPupIpYQ==
+preact-context-menu@0.3.0-patch.0:
+  version "0.3.0-patch.0"
+  resolved "https://registry.yarnpkg.com/preact-context-menu/-/preact-context-menu-0.3.0-patch.0.tgz#d24a415271d51aec2c66eae138584a9c456ee051"
+  integrity sha512-Dm5eOMb/2yn3K66xtg+k9u1SR/DgNqDbDO89ZWprqXcAa8zQmd4jgWn4mWoglVlcarBqBYcMnwoBZArzoGfqxA==
   dependencies:
     preact "^10.5.14"
 
