From 56f24116529eef190bb618486a0a7cae83c39172 Mon Sep 17 00:00:00 2001
From: Paul Makles <paulmakles@gmail.com>
Date: Sat, 15 Jan 2022 14:11:08 +0000
Subject: [PATCH] feat(messaging): add basic support for text embeds

---
 .../messaging/attachments/Attachment.tsx      |  2 +-
 .../common/messaging/embed/Embed.tsx          | 86 ++++++++++++-------
 2 files changed, 55 insertions(+), 33 deletions(-)

diff --git a/src/components/common/messaging/attachments/Attachment.tsx b/src/components/common/messaging/attachments/Attachment.tsx
index f3f14e63..4ac53214 100644
--- a/src/components/common/messaging/attachments/Attachment.tsx
+++ b/src/components/common/messaging/attachments/Attachment.tsx
@@ -15,7 +15,7 @@ import TextFile from "./TextFile";
 
 interface Props {
     attachment: AttachmentI;
-    hasContent: boolean;
+    hasContent?: boolean;
 }
 
 const MAX_ATTACHMENT_WIDTH = 480;
diff --git a/src/components/common/messaging/embed/Embed.tsx b/src/components/common/messaging/embed/Embed.tsx
index a4aa7d23..c8ad108e 100644
--- a/src/components/common/messaging/embed/Embed.tsx
+++ b/src/components/common/messaging/embed/Embed.tsx
@@ -8,6 +8,8 @@ import { useIntermediate } from "../../../../context/intermediate/Intermediate";
 import { useClient } from "../../../../context/revoltjs/RevoltClient";
 
 import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/MessageArea";
+import Markdown from "../../../markdown/Markdown";
+import Attachment from "../attachments/Attachment";
 import EmbedMedia from "./EmbedMedia";
 
 interface Props {
@@ -45,34 +47,43 @@ export default function Embed({ embed }: Props) {
     }
 
     switch (embed.type) {
+        case "Text":
         case "Website": {
             // Determine special embed size.
             let mw, mh;
             const largeMedia =
-                (embed.special && embed.special.type !== "None") ||
-                embed.image?.size === "Large";
-            switch (embed.special?.type) {
-                case "YouTube":
-                case "Bandcamp": {
-                    mw = embed.video?.width ?? 1280;
-                    mh = embed.video?.height ?? 720;
-                    break;
-                }
-                case "Twitch": {
-                    mw = 1280;
-                    mh = 720;
-                    break;
-                }
-                default: {
-                    if (embed.image?.size === "Preview") {
-                        mw = MAX_EMBED_WIDTH;
-                        mh = Math.min(
-                            embed.image.height ?? 0,
-                            MAX_PREVIEW_SIZE,
-                        );
-                    } else {
-                        mw = embed.image?.width ?? MAX_EMBED_WIDTH;
-                        mh = embed.image?.height ?? 0;
+                embed.type === "Text"
+                    ? typeof embed.media !== "undefined"
+                    : (embed.special && embed.special.type !== "None") ||
+                      embed.image?.size === "Large";
+
+            if (embed.type === "Text") {
+                mw = MAX_EMBED_WIDTH;
+                mh = 0;
+            } else {
+                switch (embed.special?.type) {
+                    case "YouTube":
+                    case "Bandcamp": {
+                        mw = embed.video?.width ?? 1280;
+                        mh = embed.video?.height ?? 720;
+                        break;
+                    }
+                    case "Twitch": {
+                        mw = 1280;
+                        mh = 720;
+                        break;
+                    }
+                    default: {
+                        if (embed.image?.size === "Preview") {
+                            mw = MAX_EMBED_WIDTH;
+                            mh = Math.min(
+                                embed.image.height ?? 0,
+                                MAX_PREVIEW_SIZE,
+                            );
+                        } else {
+                            mw = embed.image?.width ?? MAX_EMBED_WIDTH;
+                            mh = embed.image?.height ?? 0;
+                        }
                     }
                 }
             }
@@ -87,7 +98,9 @@ export default function Embed({ embed }: Props) {
                         width: width + CONTAINER_PADDING,
                     }}>
                     <div>
-                        {embed.site_name && (
+                        {(embed.type === "Text"
+                            ? embed.title
+                            : embed.site_name) && (
                             <div className={styles.siteinfo}>
                                 {embed.icon_url && (
                                     <img
@@ -102,13 +115,15 @@ export default function Embed({ embed }: Props) {
                                     />
                                 )}
                                 <div className={styles.site}>
-                                    {embed.site_name}{" "}
+                                    {embed.type === "Text"
+                                        ? embed.title
+                                        : embed.site_name}{" "}
                                 </div>
                             </div>
                         )}
 
                         {/*<span><a href={embed.url} target={"_blank"} className={styles.author}>Author</a></span>*/}
-                        {embed.title && (
+                        {embed.type === "Website" && embed.title && (
                             <span>
                                 <a
                                     onMouseDown={(ev) =>
@@ -122,15 +137,22 @@ export default function Embed({ embed }: Props) {
                         )}
                         {embed.description && (
                             <div className={styles.description}>
-                                {embed.description}
+                                {embed.type === "Text" ? (
+                                    <Markdown content={embed.description} />
+                                ) : (
+                                    embed.description
+                                )}
                             </div>
                         )}
 
-                        {largeMedia && (
-                            <EmbedMedia embed={embed} height={height} />
-                        )}
+                        {largeMedia &&
+                            (embed.type === "Text" ? (
+                                <Attachment attachment={embed.media!} />
+                            ) : (
+                                <EmbedMedia embed={embed} height={height} />
+                            ))}
                     </div>
-                    {!largeMedia && (
+                    {!largeMedia && embed.type === "Website" && (
                         <div>
                             <EmbedMedia
                                 embed={embed}