[FR-175] Support library users creating context menus

package.json

@@ -29,6 +29,7 @@
   },
   "homepage": "https://widgetbot-io.github.io/message-renderer",
   "dependencies": {
+    "@radix-ui/react-context-menu": "^2.1.5",
     "@stitches/react": "^1.3.1-1",
     "autobind-decorator": "^2.4.0",
     "color": "^4.2.3",

src/Content/style.ts

@@ -180,6 +180,7 @@ export const ReplyIcon = styled.withConfig({
   marginLeft: theme.space.small,
   width: 20,
   height: 20,
+  color: theme.colors.primaryOpacity100,
 });
 
 export const StickerTooltipIcon = styled.withConfig({

src/Message/Components/MessageContextMenu/index.tsx

@@ -0,0 +1,100 @@
+import * as ContextMenu from "@radix-ui/react-context-menu";
+import type { ReactElement } from "react";
+import React, { useMemo } from "react";
+import type {
+  ContextMenuItem,
+  PartialSvgConfig,
+} from "../../../core/ConfigContext";
+import {
+  ContextMenuItemType,
+  IconType,
+  useConfig,
+} from "../../../core/ConfigContext";
+import * as Styles from "./style";
+import type { ChatMessage } from "../../../types";
+import SvgFromUrl from "../../../SvgFromUrl";
+import type { SvgConfig } from "../../../core/svgs";
+
+function MenuItem<SC extends PartialSvgConfig>({
+  menuItem,
+}: {
+  menuItem: ContextMenuItem<SC>;
+}) {
+  switch (menuItem.type) {
+    case ContextMenuItemType.Separator:
+      return <Styles.Separator />;
+    case ContextMenuItemType.SubMenu:
+      return (
+        <ContextMenu.Sub>
+          <Styles.Item
+            as={ContextMenu.SubTrigger}
+            disabled={menuItem.isDisabled}
+            isDisabled={menuItem.isDisabled}
+          >
+            {menuItem.content}
+            <Styles.ItemIcon>
+              <SvgFromUrl width={10} height={14} svg="MiscCaret" />
+            </Styles.ItemIcon>
+          </Styles.Item>
+          <ContextMenu.Portal>
+            <Styles.Content as={ContextMenu.SubContent} sideOffset={12}>
+              {menuItem.items.map((subMenuItem, index) => (
+                <MenuItem menuItem={subMenuItem} key={index} />
+              ))}
+            </Styles.Content>
+          </ContextMenu.Portal>
+        </ContextMenu.Sub>
+      );
+    case ContextMenuItemType.Item:
+      return (
+        <Styles.Item
+          isDanger={menuItem.isDanger}
+          isDisabled={menuItem.isDisabled}
+          disabled={menuItem.isDisabled}
+          onSelect={menuItem.onSelect}
+        >
+          {menuItem.content}
+          <Styles.ItemIcon>
+            {menuItem.icon.type === IconType.Svg ? (
+              <SvgFromUrl
+                width={18}
+                height={18}
+                svg={menuItem.icon.svg as keyof SvgConfig}
+              />
+            ) : (
+              <img src={menuItem.icon.url} width={18} height={18} alt="" />
+            )}
+          </Styles.ItemIcon>
+        </Styles.Item>
+      );
+  }
+}
+
+interface Props {
+  children: ReactElement;
+  message: ChatMessage;
+}
+
+export function MessageContextMenu({ children, message }: Props) {
+  const { messageContextMenuItems } = useConfig();
+
+  if (!messageContextMenuItems) return children;
+
+  const menuItems = useMemo(
+    () => messageContextMenuItems(message),
+    [message, messageContextMenuItems]
+  );
+
+  return (
+    <ContextMenu.Root>
+      <Styles.Trigger>{children}</Styles.Trigger>
+      <ContextMenu.Portal>
+        <Styles.Content>
+          {menuItems.map((value, index) => (
+            <MenuItem menuItem={value} key={index} />
+          ))}
+        </Styles.Content>
+      </ContextMenu.Portal>
+    </ContextMenu.Root>
+  );
+}

src/Message/Components/MessageContextMenu/style.ts

@@ -0,0 +1,90 @@
+import * as ContextMenu from "@radix-ui/react-context-menu";
+import {
+  commonComponentId,
+  styled,
+  theme,
+} from "../../../Stitches/stitches.config";
+import * as MessageStyles from "../../style/message";
+
+export const Trigger = styled(ContextMenu.Trigger, {
+  [`&[data-state="open"] ${MessageStyles.Message}`]:
+    MessageStyles.messageHoverStyles,
+});
+
+export const Content = styled.withConfig({
+  displayName: "context-menu-content",
+  componentId: commonComponentId,
+})(ContextMenu.Content, {
+  backgroundColor: theme.colors.backgroundFloating,
+  fontFamily: theme.fonts.main,
+  fontSize: theme.fontSizes.m,
+  padding: theme.space.large,
+  borderRadius: 4,
+  minWidth: 188,
+  maxWidth: 320,
+});
+
+export const Item = styled.withConfig({
+  displayName: "context-menu-item",
+  componentId: commonComponentId,
+})(ContextMenu.Item, {
+  color: theme.colors.interactiveNormal,
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "space-between",
+  alignItems: "center",
+  paddingTop: theme.space.medium,
+  paddingBottom: theme.space.medium,
+  paddingLeft: theme.space.large,
+  paddingRight: theme.space.large,
+  outline: "none",
+  borderRadius: 2,
+  marginTop: theme.space.xs,
+  marginBottom: theme.space.xs,
+
+  '&[data-state="open"], &[data-highlighted]': {
+    backgroundColor: theme.colors.contextMenuItemHoverPrimary,
+    color: theme.colors.primaryFull,
+    cursor: "pointer",
+  },
+
+  variants: {
+    isDisabled: {
+      true: {
+        opacity: 0.7,
+        cursor: "not-allowed",
+      },
+    },
+
+    isDanger: {
+      true: {
+        color: theme.colors.danger,
+
+        '&[data-state="open"], &[data-highlighted]': {
+          backgroundColor: theme.colors.danger,
+        },
+      },
+    },
+  },
+});
+
+export const ItemIcon = styled.withConfig({
+  displayName: "context-menu-item-icon",
+  componentId: commonComponentId,
+})("div", {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 18,
+  height: 18,
+});
+
+export const Separator = styled.withConfig({
+  displayName: "context-menu-separator",
+  componentId: commonComponentId,
+})(ContextMenu.Separator, {
+  margin: theme.space.small,
+  borderBottomWidth: 1,
+  borderBottomStyle: "solid",
+  borderBottomColor: theme.colors.backgroundModifierAccent,
+});

src/Message/MessageAuthor.tsx

@@ -34,7 +34,6 @@ export function AutomodAuthor({ isAvatarAnimated }: AutomodAuthorProps) {
 interface MessageAuthorProps
   extends ComponentProps<typeof Styles.MessageAuthor> {
   author: APIUser;
-  isAvatarAnimated?: boolean;
   onlyShowUsername?: boolean;
   crossPost?: boolean;
   referenceGuild?: Snowflake;

src/Message/index.tsx

@@ -20,6 +20,7 @@ import { MessageTypeResponse, useConfig } from "../core/ConfigContext";
 import ThreadStarterMessage from "./variants/ThreadStarterMessage";
 import AutomodAction from "./variants/AutomodAction";
 import type { ChatMessage } from "../types";
+import { MessageContextMenu } from "./Components/MessageContextMenu";
 
 export interface MessageProps {
   isFirstMessage?: boolean;
@@ -200,12 +201,18 @@ function Message(props: MessageProps) {
 
   if (props.showButtons)
     return (
-      <MessageContainer buttons={buttonOptions}>
-        <MessageTypeSwitch {...props} />
-      </MessageContainer>
+      <MessageContextMenu message={props.message}>
+        <MessageContainer buttons={buttonOptions}>
+          <MessageTypeSwitch {...props} />
+        </MessageContainer>
+      </MessageContextMenu>
     );
 
-  return <MessageTypeSwitch {...props} />;
+  return (
+    <MessageContextMenu message={props.message}>
+      <MessageTypeSwitch {...props} />
+    </MessageContextMenu>
+  );
 }
 
 export default memo(Message);

src/Message/style/message.ts

@@ -33,6 +33,10 @@ export const LargeTimestamp = styled.withConfig({
   lineHeight: `1.375rem`,
 });
 
+export const messageHoverStyles = {
+  backgroundColor: theme.colors.messageHover,
+};
+
 export const Message = styled.withConfig({
   displayName: "message",
   componentId: commonComponentId,
@@ -58,9 +62,7 @@ export const Message = styled.withConfig({
 
     // IF THERE IS A BUG WITH THE HOVER COLOR IT'S BECAUSE WE MOVED THIS
     // FROM THE CONTAINER TO HERE
-    "&:hover": {
-      backgroundColor: theme.colors.messageHover,
-    },
+    "&:hover": messageHoverStyles,
 
     variants: {
       isMentioned: {
@@ -195,6 +197,7 @@ export namespace MessageContainerStyle {
     padding: theme.space.medium,
     opacity: 0.7,
     backgroundColor: "transparent",
+    color: theme.colors.primaryOpacity100,
 
     "&:hover": {
       backgroundColor: theme.colors.primaryOpacity10,

src/Message/variants/AutomodAction.tsx

@@ -218,21 +218,20 @@ function AutomodAction({ message, isHovered }: AutomodActionProps) {
       <Styles.AutomodMessageInQuestion>
         <MessageAuthor
           author={message.author}
-          isAvatarAnimated={isHovered}
           crossPost={false}
           referenceGuild={undefined}
           guildId={guildId}
         />
         <Styles.AutomodMessageContent>
           {messageContent.map((content, index) => (
-            <>
-              <span key={`content-${index}`}>{content}</span>
+            <React.Fragment key={`content-${index}`}>
+              <span>{content}</span>
               {index < messageContent.length - 1 && (
-                <Styles.AutomodFlaggedKeyword key={`match-${index}`}>
+                <Styles.AutomodFlaggedKeyword>
                   {matches?.[index]}
                 </Styles.AutomodFlaggedKeyword>
               )}
-            </>
+            </React.Fragment>
           ))}
         </Styles.AutomodMessageContent>
         <Styles.AutomodMatchInfoContainer>

src/Stitches/stitches.config.tsx

@@ -14,13 +14,17 @@ const stitches = createStitches({
       primaryOpacity80: "rgba(255, 255, 255, 0.8)",
       primaryOpacity100: "rgba(255, 255, 255, 1.0)",
       primaryDark: "#72767d",
+      primaryFull: "#fff",
       systemMessageDark: "#999999",
       textMuted: "rgb(163, 166, 170)",
       interactiveNormal: "#dcddde",
       accent: "#5865f2",
+      contextMenuItemHoverPrimary: "#4752C4",
       background: "#36393f",
       backgroundSecondary: "#2b2d31",
       backgroundTertiary: "#1e1f22",
+      backgroundFloating: "#111214",
+      backgroundModifierAccent: "rgba(78, 80, 88, 0.48)",
       lazyImageBackground: "#2c2e32",
       messageHover: "rgba(0, 0, 0, .05)",
       link: "#00b0f4",