InteractionKeybinds: Scroll to message if offscreen

Closes https://github.com/Vendicated/Vencord/issues/200

2 files changed, 25 insertions, 4 deletions

diff --git a/src/plugins/interactionKeybinds.ts b/src/plugins/interactionKeybinds.ts
index 76a25bb..61af4ac 100644
--- a/src/plugins/interactionKeybinds.ts
+++ b/src/plugins/interactionKeybinds.ts
@@ -22,9 +22,9 @@ import { Devs } from "../utils/constants";
 import { lazyWebpack } from "../utils/misc";
 import definePlugin from "../utils/types";
 import { filters } from "../webpack";
-import { ChannelStore, FluxDispatcher as Dispatcher, SelectedChannelStore, UserStore } from "../webpack/common";
+import { ChannelStore, FluxDispatcher as Dispatcher, MessageStore, SelectedChannelStore, UserStore } from "../webpack/common";
 
-const MessageStore = lazyWebpack(filters.byProps("getRawMessages"));
+const Kangaroo = lazyWebpack(filters.byProps("jumpToMessage"));
 
 const isMac = navigator.platform.includes("Mac"); // bruh
 let replyIdx = -1;
@@ -91,6 +91,24 @@ function onKeydown(e: KeyboardEvent) {
         nextReply(isUp);
 }
 
+function jumpIfOffScreen(channelId: string, messageId: string) {
+    const element = document.getElementById("message-content-" + messageId);
+    if (!element) return;
+
+    const vh = Math.max(document.documentElement.clientHeight, window.innerHeight);
+    const rect = element.getBoundingClientRect();
+    const isOffscreen = rect.bottom < 200 || rect.top - vh >= -200;
+
+    if (isOffscreen) {
+        Kangaroo.jumpToMessage({
+            channelId,
+            messageId,
+            flash: false,
+            jumpType: "INSTANT"
+        });
+    }
+}
+
 function getNextMessage(isUp: boolean, isReply: boolean) {
     let messages: Message[] = MessageStore.getMessages(SelectedChannelStore.getChannelId())._array;
     if (!isReply) { // we are editing so only include own
@@ -131,6 +149,7 @@ function nextReply(isUp: boolean) {
         showMentionToggle: channel.guild_id !== null && message.author.id !== meId,
         _isQuickReply: true
     });
+    jumpIfOffScreen(channel.id, message.id);
 }
 
 // handle next/prev edit
@@ -142,7 +161,7 @@ function nextEdit(isUp: boolean) {
             type: "MESSAGE_END_EDIT",
             channelId: SelectedChannelStore.getChannelId()
         });
-    else
+    else {
         Dispatcher.dispatch({
             type: "MESSAGE_START_EDIT",
             channelId: message.channel_id,
@@ -150,4 +169,6 @@ function nextEdit(isUp: boolean) {
             content: message.content,
             _isQuickEdit: true
         });
+        jumpIfOffScreen(message.channel_id, message.id);
+    }
 }
diff --git a/src/webpack/common.tsx b/src/webpack/common.tsx
index b5c2c2f..8c77506 100644
--- a/src/webpack/common.tsx
+++ b/src/webpack/common.tsx
@@ -32,7 +32,7 @@ export const Flux = lazyWebpack(filters.byProps("connectStores"));
 export let React: typeof import("react");
 export const ReactDOM: typeof import("react-dom") = lazyWebpack(filters.byProps("createPortal", "render"));
 
-export const MessageStore = lazyWebpack(filters.byProps("getRawMessages")) as Stores.MessageStore;
+export const MessageStore = lazyWebpack(filters.byProps("getRawMessages")) as Omit<Stores.MessageStore, "getMessages"> & { getMessages(chanId: string): any; };
 export let GuildStore: Stores.GuildStore;
 export let UserStore: Stores.UserStore;
 export let SelectedChannelStore: Stores.SelectedChannelStore;