embed fields

example.js

@@ -19,6 +19,7 @@ function KitchenSink() {
         url="https://example.com"
         timestamp={new Date().toISOString()}
         thumbnailUrl="https://example.com/thumbnail.png"
+        imageUrl="https://example.com/image.png"
         author={{
           name: "the author",
           url: "https://example.com",
@@ -35,10 +36,6 @@ function KitchenSink() {
         <EmbedField name="field name" inline>
           field content but inline
         </EmbedField>
-        <EmbedImage url="https://example.com/image.png" />
-        <EmbedImage url="https://example.com/image.png" />
-        <EmbedImage url="https://example.com/image.png" />
-        <EmbedImage url="https://example.com/image.png" />
       </Embed>
       {/* files */}
       <File url="data:sdklfjs" />

notes.md

@@ -9,8 +9,8 @@
   - [x] title - text children, url
   - [x] footer - icon url, timestamp, text children
   - [x] thumbnail - url
-  - [ ] image - url
+  - [x] image - url
-  - [ ] fields - name, value, inline
+  - [x] fields - name, value, inline
 - message components
   - [ ] buttons
   - [ ] links
@@ -20,6 +20,7 @@
 # cool ideas / polish
 
 - [ ] files
+- [ ] stickers
 - [ ] user mention component
 - [ ] channel mention component
 - [ ] timestamp component

src/embed-field.tsx

@@ -0,0 +1,34 @@
+import type { MessageEmbedOptions } from "discord.js"
+import React from "react"
+import { ContainerInstance } from "./container-instance.js"
+import { pick } from "./helpers/pick.js"
+
+export type EmbedFieldProps = {
+  name: string
+  children: React.ReactNode
+  inline?: boolean
+}
+
+export function EmbedField(props: EmbedFieldProps) {
+  return (
+    <reacord-element createInstance={() => new EmbedFieldInstance(props)}>
+      {props.children}
+    </reacord-element>
+  )
+}
+
+class EmbedFieldInstance extends ContainerInstance {
+  readonly name = "EmbedField"
+
+  constructor(private readonly props: EmbedFieldProps) {
+    super({ warnOnNonTextChildren: true })
+  }
+
+  override renderToEmbed(options: MessageEmbedOptions) {
+    options.fields ??= []
+    options.fields.push({
+      ...pick(this.props, "name", "inline"),
+      value: this.getChildrenText(),
+    })
+  }
+}

src/embed.tsx

@@ -12,6 +12,7 @@ export type EmbedProps = {
   color?: ColorResolvable
   url?: string
   timestamp?: Date | number | string
+  imageUrl?: string
   thumbnailUrl?: string
   author?: {
     name?: string
@@ -48,6 +49,10 @@ class EmbedInstance extends ContainerInstance {
   getEmbedOptions(): MessageEmbedOptions {
     const options: MessageEmbedOptions = {
       ...this.props,
+      image: this.props.imageUrl ? { url: this.props.imageUrl } : undefined,
+      thumbnail: this.props.thumbnailUrl
+        ? { url: this.props.thumbnailUrl }
+        : undefined,
       author: {
         ...this.props.author,
         iconURL: this.props.author?.iconUrl,

src/rendering.test.tsx

@@ -2,6 +2,7 @@
 import type { Message, MessageOptions } from "discord.js"
 import { Client, TextChannel } from "discord.js"
 import React from "react"
+import { EmbedField } from "./embed-field.js"
 import { omit } from "./helpers/omit.js"
 import { raise } from "./helpers/raise.js"
 import type { ReacordRoot } from "./main"
@@ -79,6 +80,8 @@ test("empty embed author", async () => {
 
 test("kitchen sink", async () => {
   const timestamp = Date.now()
+  const image =
+    "https://cdn.discordapp.com/avatars/109677308410875904/3e53fcb70760a08fa63f73376ede5d1f.png?size=1024"
 
   await root.render(
     <>
@@ -89,23 +92,26 @@ test("kitchen sink", async () => {
         title="the embed"
         url="https://example.com"
         timestamp={timestamp}
-        thumbnailUrl="https://cdn.discordapp.com/avatars/109677308410875904/3e53fcb70760a08fa63f73376ede5d1f.png?size=1024"
+        imageUrl={image}
+        thumbnailUrl={image}
         author={{
           name: "hi craw",
           url: "https://example.com",
-          iconUrl:
+          iconUrl: image,
-            "https://cdn.discordapp.com/avatars/109677308410875904/3e53fcb70760a08fa63f73376ede5d1f.png?size=1024",
         }}
         footer={{
           text: "the footer",
-          iconUrl:
+          iconUrl: image,
-            "https://cdn.discordapp.com/avatars/109677308410875904/3e53fcb70760a08fa63f73376ede5d1f.png?size=1024",
         }}
       >
         description <Text>more description</Text>
       </Embed>
       <Embed>
         another <Text>hi</Text>
+        <EmbedField name="field name">field content</EmbedField>
+        <EmbedField name="field name" inline>
+          field content but inline
+        </EmbedField>
       </Embed>
     </>,
   )
@@ -116,6 +122,8 @@ test("kitchen sink", async () => {
         {
           color: 0xfe_ee_ef,
           description: "description more description",
+          image: { url: image },
+          thumbnail: { url: image },
           author: {
             name: "hi craw",
             url: "https://example.com",
@@ -131,7 +139,17 @@ test("kitchen sink", async () => {
           title: "the embed",
           url: "https://example.com",
         },
-        { description: "another hi" },
+        {
+          description: "another hi",
+          fields: [
+            { name: "field name", value: "field content", inline: false },
+            {
+              name: "field name",
+              value: "field content but inline",
+              inline: true,
+            },
+          ],
+        },
       ],
     },
   ])
@@ -163,8 +181,12 @@ function extractMessageData(message: Message): MessageOptions {
           color: embed.color ?? undefined,
           fields: nonEmptyOrUndefined(embed.fields),
           author: embed.author ? omit(embed.author, "proxyIconURL") : undefined,
-          thumbnail: embed.thumbnail ?? undefined,
+          thumbnail: embed.thumbnail
-          image: embed.image ?? undefined,
+            ? omit(embed.thumbnail, "proxyURL", "width", "height")
+            : undefined,
+          image: embed.image
+            ? omit(embed.image, "proxyURL", "width", "height")
+            : undefined,
           video: embed.video ?? undefined,
           footer: embed.footer ? omit(embed.footer, "proxyIconURL") : undefined,
         })),