diff --git a/packages/discord-types/src/components.d.ts b/packages/discord-types/src/components.d.ts index a8b181599..5dca0599a 100644 --- a/packages/discord-types/src/components.d.ts +++ b/packages/discord-types/src/components.d.ts @@ -541,3 +541,10 @@ export type ColorPicker = ComponentType<{ label?: ReactNode; onChange(value: number | null): void; }>; + +export type RoleMemberPopout = ComponentType<{ + popoutProps: PopoutProps; + guildId: string; + channelId: string; + roleId: string; +}>; diff --git a/src/plugins/_core/concatenatedComponentExtractor.tsx b/src/plugins/_core/concatenatedComponentExtractor.tsx index 7fd23ff77..288d530b3 100644 --- a/src/plugins/_core/concatenatedComponentExtractor.tsx +++ b/src/plugins/_core/concatenatedComponentExtractor.tsx @@ -6,7 +6,7 @@ import { Devs } from "@utils/constants"; import definePlugin from "@utils/types"; -import { setColorPicker, setCreateScroller } from "@webpack/common"; +import { setColorPicker, setCreateScroller, setRoleMemberPopout } from "@webpack/common"; export default definePlugin({ name: "ConcatenatedComponentExtractor", @@ -29,9 +29,17 @@ export default definePlugin({ match: /(?=function (\i)\(\i,\i,\i\)\{.{0,20}?return \i\.forwardRef\(function\(\i,\i\)\{let\{[^}]+?="ltr",orientation:)/, replace: "$self.setCreateScroller($1);" } - } + }, + { + find: ".ROLE_MENTION)", + replacement: { + match: /function (\i)(?=.+?renderPopout:.{0,20}\1,\{guildId:\i,channelId:\i)/, + replace: "$self.setRoleMemberPopout($1);$&" + } + }, ], setCreateScroller, setColorPicker, + setRoleMemberPopout, }); diff --git a/src/plugins/betterRoleContext/index.tsx b/src/plugins/betterRoleContext/index.tsx index 5344da5b3..53f603dc3 100644 --- a/src/plugins/betterRoleContext/index.tsx +++ b/src/plugins/betterRoleContext/index.tsx @@ -13,10 +13,9 @@ import { getCurrentChannel, getCurrentGuild, getIntlMessage, openImageModal } fr import { isTruthy } from "@utils/guards"; import { classes } from "@utils/misc"; import definePlugin, { OptionType } from "@utils/types"; -import { Guild, PopoutProps, Role } from "@vencord/discord-types"; +import { Guild, Role } from "@vencord/discord-types"; import { findByCodeLazy, findByPropsLazy, findCssClassesLazy } from "@webpack"; -import { ContextMenuApi, GuildRoleStore, Menu, PermissionStore, Popout, useRef } from "@webpack/common"; -import { ComponentType } from "react"; +import { ContextMenuApi, GuildRoleStore, Menu, PermissionStore, Popout, RoleMemberPopout, useRef } from "@webpack/common"; const GuildSettingsActions = findByPropsLazy("open", "selectRole", "updateGuild"); const MenuItemClasses = findCssClassesLazy("item", "labelContainer", "colorDefault", "label", "iconContainer"); @@ -76,15 +75,6 @@ const settings = definePluginSettings({ } }); -interface RoleMemberPopoutProps { - popoutProps: PopoutProps; - guildId: string; - channelId: string; - roleId: string; -} -type RoleMemberPopout = ComponentType; - -let RoleMemberPopout: RoleMemberPopout = () => null; export function buildExtraRoleContextMenuItems(role: Role, guild: Guild, popoutRef?: React.RefObject) { if (!role) return { before: [], after: [] }; @@ -211,13 +201,6 @@ export default definePlugin({ settings, openRoleContextMenu, patches: [ - { - find: ".ROLE_MENTION)", - replacement: { - match: /function (\i)(?=.+?renderPopout:.{0,20}\1,\{guildId:\i,channelId:\i)/, - replace: "$self.RoleMembers=$1;$&" - } - }, // Conflicts with RoleColorEverywhere which changes the code at the end of our match. (and also uses same find & similar match) // However, BetterRoleContext applies first (alphabetic order), so it's not an issue { @@ -234,10 +217,6 @@ export default definePlugin({ DeveloperMode.updateSetting(true); }, - set RoleMembers(component: RoleMemberPopout) { - RoleMemberPopout = component; - }, - contextMenus: { "dev-context"(children, { id }: { id: string; }) { const popoutRef = useRef(null); diff --git a/src/webpack/common/components.ts b/src/webpack/common/components.ts index cf11deeae..7cda74590 100644 --- a/src/webpack/common/components.ts +++ b/src/webpack/common/components.ts @@ -68,14 +68,17 @@ export const TabBar = waitForComponent("TabBar", filters.componentByCode("ref:th // TODO: remake this component export const Clickable = waitForComponent("Clickable", filters.componentByCode("this.context?this.renderNonInteractive():")); export const Avatar = waitForComponent("Avatar", filters.componentByCode(".size-1.375*")); +export const UserSummaryItem = waitForComponent("UserSummaryItem", filters.componentByCode("defaultRenderUser", "showDefaultAvatarsForNullUsers")); export let ColorPicker: t.ColorPicker = () => null; export function setColorPicker(component: t.ColorPicker) { ColorPicker = component; } - -export const UserSummaryItem = waitForComponent("UserSummaryItem", filters.componentByCode("defaultRenderUser", "showDefaultAvatarsForNullUsers")); +export let RoleMemberPopout: t.RoleMemberPopout = () => null; +export function setRoleMemberPopout(component: t.RoleMemberPopout) { + RoleMemberPopout = component; +} export let createScroller: ((scrollbarClassName: string, fadeClassName: string, customThemeClassName: string) => t.ScrollerThin) | undefined; export function setCreateScroller(cs: NonNullable) { diff --git a/src/webpack/webpack.ts b/src/webpack/webpack.ts index 7e420575b..6ccd27a5f 100644 --- a/src/webpack/webpack.ts +++ b/src/webpack/webpack.ts @@ -55,7 +55,7 @@ export const stringMatches = (s: string, filter: CodeFilter) => ); export function makeClassNameRegex(className: string) { - return new RegExp(`(?:\\b|_)${escapeRegExp(className)}(?:\\b|_)`); + return new RegExp(`(?<=^|\\s)${escapeRegExp(className)}(?:_\\S*)?(?=$|\\s)`); } export const filters = {