Merge remote-tracking branch 'origin' into feat/message-editing

Author: tylergeorges

src/Content/Attachment/style.ts

@@ -12,6 +12,8 @@ export const ImageAttachment = styled.withConfig({
   displayName: "image-attachment",
   componentId: commonComponentId,
 })(LazyLoadImage, {
+  maxWidth: "100%",
+  height: "auto",
   variants: {
     clickable: {
       true: {
@@ -30,6 +32,8 @@ export const LazyImagePlaceholder = styled.withConfig({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
+  maxWidth: "100%",
+  height: "auto",
 });
 
 export const VideoAttachmentContainer = styled.withConfig({

src/Content/Embed/EmbeddedImage.tsx

@@ -3,6 +3,7 @@ import type { ComponentProps } from "react";
 import React from "react";
 import { useConfig } from "../../core/ConfigContext";
 import type { APIEmbedImage } from "discord-api-types/v10";
+import useSize from "src/Content/Attachment/useSize";
 
 interface Props extends ComponentProps<typeof Styles.Image> {
   embedImage: APIEmbedImage;
@@ -14,14 +15,22 @@ interface Props extends ComponentProps<typeof Styles.Image> {
 function EmbeddedImage({ width, height, embedImage, ...rest }: Props) {
   const { embedImageOnClick } = useConfig();
 
+  const { width: widthEmbed, height: heightEmbed } = useSize(
+    width ?? 1,
+    height ?? 1
+  );
+
+  const actualWidth = widthEmbed ?? width;
+  const actualHeight = heightEmbed ?? height;
+
   return (
     <Styles.Image
       {...rest}
       src={embedImage.proxy_url ?? embedImage.url}
       clickable={embedImageOnClick !== undefined}
       onClick={() => embedImageOnClick?.(embedImage)}
-      width={width}
-      height={height}
+      width={actualWidth}
+      height={actualHeight}
     />
   );
 }

src/Content/Embed/index.tsx

@@ -5,14 +5,14 @@ import * as Styles from "./style";
 import { colorIntToRgba } from "../../utils/colorIntToCss";
 import moment from "moment";
 import { LinkMarkdown, parseEmbedTitle } from "../../markdown/render";
-import useSize from "./useSize";
 import EmbedVideo from "./EmbedVideo";
 import React, { useMemo } from "react";
 import type { APIEmbed, APIEmbedImage } from "discord-api-types/v10";
 import { EmbedType } from "discord-api-types/v10";
 import EmbeddedImage from "./EmbeddedImage";
 import ExternalLink from "../../ExternalLink";
 import { error } from "../../utils/error";
+import useSize from "src/Content/Embed/useSize";
 
 export interface EmbedProps {
   embed: APIEmbed;
@@ -38,7 +38,7 @@ function Embed({ embed, images }: EmbedProps) {
       ? colorIntToRgba(embed.color)
       : undefined;
 
-  const { width: widthImage, height: heightImage } = useSize(
+  const { width: widthImage } = useSize(
     embed.type,
     embed.image,
     "EmbedImage",
@@ -140,8 +140,11 @@ function Embed({ embed, images }: EmbedProps) {
       {(images === undefined || images?.length === 0) && embed.image && (
         <EmbeddedImage
           embedImage={embed.image}
-          width={widthImage ?? undefined}
-          height={heightImage ?? undefined}
+          withMargin
+          image={embed.image}
+          width={embed.image.width}
+          height={embed.image.height}
+          type="EmbedImage"
         />
       )}
       {images && images.length > 0 && (

src/Content/Embed/style.ts

@@ -21,7 +21,6 @@ export const Embed = styled.withConfig({
   display: "flex",
   flexDirection: "column",
   maxWidth: 520,
-
   variants: {
     thin: {
       true: {
@@ -35,9 +34,10 @@ export const ContentAndThumbnail = styled.withConfig({
   displayName: "embed-content-and-thumbnail",
   componentId: commonComponentId,
 })("div", {
-  display: "flex",
+  display: "grid",
+  gridAutoColumns: "auto",
   gap: theme.space.xxl,
-
+  maxWidth: "100%",
   variants: {
     hasLargeThumbnail: {
       true: {
@@ -54,6 +54,8 @@ export const Content = styled.withConfig({
 })("div", {
   display: "grid",
   gap: theme.space.large,
+  gridColumnStart: "1",
+  gridColumnEnd: "1",
 });
 
 export const Provider = styled.withConfig({
@@ -192,6 +194,10 @@ export const Image = styled.withConfig({
   componentId: commonComponentId,
 })("img", {
   borderRadius: 3,
+  flexShrink: 0,
+  gridColumnStart: "2",
+  maxWidth: "100%",
+  height: "auto",
 
   variants: {
     clickable: {
@@ -279,6 +285,8 @@ export const MediaEmbed = styled.withConfig({
 })("img", {
   borderRadius: 3,
   cursor: "pointer",
+  maxWidth: "100%",
+  height: "auto",
 });
 
 export const VideoIframe = styled.withConfig({

src/Message/MessageAuthor.tsx

@@ -101,7 +101,7 @@ function MessageAuthor({
       <Styles.MessageAuthor
         clickable={userOnClick !== undefined}
         {...props}
-        onClick={() => userOnClick?.(author)}
+        onClick={(e) => userOnClick?.(author, e.currentTarget)}
       >
         <Styles.Username style={{ color: dominantRoleColor }}>
           {displayName}
@@ -114,7 +114,7 @@ function MessageAuthor({
     <Styles.MessageAuthor
       clickable={userOnClick !== undefined}
       {...props}
-      onClick={() => userOnClick?.(author)}
+      onClick={(e) => userOnClick?.(author, e.currentTarget)}
     >
       <Styles.AnimatedAvatarTrigger
         data-is-animated={animatedAvatarUrl !== undefined}

src/Stitches/stitches.config.tsx

@@ -74,6 +74,7 @@ const stitches = createStitches({
       messageLeftPadding: "72px",
       threadButton: "34px",
       messageTypeIcon: "16px",
+      embedThumbnail: "80px",
     },
     borderWidths: {
       spines: "2px",

src/core/ConfigContext.ts

@@ -55,7 +55,7 @@ export type Config<SvgConfig extends PartialSvgConfig> = {
   // Click handlers
   currentUser(): APIUser | null;
   seeThreadOnClick?(messageId: Snowflake, thread: APIChannel): void;
-  userOnClick?(user: APIUser): void;
+  userOnClick?(user: APIUser, element: EventTarget & HTMLSpanElement): void;
   roleMentionOnClick?(role: APIRole): void;
   channelMentionOnClick?(channel: APIChannel): void;
   openPinnedMessagesOnClick?(channel: APIChannel): void;

src/markdown/render/elements/mentions/userMention.tsx

@@ -18,8 +18,8 @@ function UserMention({ userId }: UserMentionProps) {
 
   return (
     <Styles.Mention
-      onClick={() => {
-        if (user !== null) userOnClick?.(user);
+      onClick={(e) => {
+        if (user !== null) userOnClick?.(user, e.currentTarget);
       }}
       canBeClicked={userOnClick !== undefined}
     >

src/stories/Wrapper.tsx

@@ -398,7 +398,17 @@ const Wrapper: Decorator = (Story) => {
       seeThreadOnClick={(messageId, thread) =>
         alert(`See Thread "${thread.name}" clicked on message ${messageId}`)
       }
-      userOnClick={(user) => alert(`User "${getDisplayName(user)}" clicked!`)}
+      userOnClick={(user, el) => {
+        const elPos = el.getBoundingClientRect();
+
+        return alert(
+          `User "${getDisplayName(
+            user
+          )}" clicked! \nClicked Position: X - ${Math.floor(
+            elPos.left
+          )}   Y - ${Math.floor(elPos.top)}`
+        );
+      }}
       roleMentionOnClick={(role) =>
         alert(`Role "${role.name}" mention clicked!`)
       }