Added support for image node in RichText

TODO.md

@@ -5,6 +5,11 @@
 - [Collectibles] Create page for gallery
 - [Collectibles] Create page for scans
 - Rich text, handle linebreak node type, remove spacer
+- Add hover/active styling for settings options in topbar + language override
+- Highlight currently selected language option in language override tooltip
+- Support for scene break blocks
+- [Folder] Add parent pages
+- When the tags overflow, the tag group name should be align start (see http://localhost:12499/en/pages/magnitude-negative-chapter-1)
 
 ## Long term
 

src/components/RichText/components/RTNode.astro

@@ -13,11 +13,13 @@ import {
   isNodeParagraphNode,
   isNodeTabNode,
   isNodeTextNode,
+  isNodeUploadNode,
   type RichTextNode,
 } from "src/shared/payload/payload-sdk";
 import RTTab from "./RTTab.astro";
 import ErrorMessage from "components/ErrorMessage.astro";
 import RTLinebreak from "./RTLinebreak.astro";
+import RTUpload from "./RTUpload/RTUpload.astro";
 
 interface Props {
   node: RichTextNode;
@@ -44,6 +46,8 @@ const { node, context } = Astro.props;
     <RTBlock node={node} context={context} />
   ) : isNodeTabNode(node) ? (
     <RTTab />
+  ) : isNodeUploadNode(node) ? (
+    <RTUpload node={node} context={context} />
   ) : (
     <ErrorMessage
       title={`Unknown node type: ${node.type}`}

src/components/RichText/components/RTUpload/RTUpload.astro

@@ -0,0 +1,24 @@
+---
+import { isUploadNodeImageNode, type RichTextUploadNode } from "src/shared/payload/payload-sdk";
+import type { RichTextContext } from "src/utils/richText";
+import RTImage from "./components/RTImage.astro";
+import ErrorMessage from "components/ErrorMessage.astro";
+
+interface Props {
+  node: RichTextUploadNode;
+  context: RichTextContext;
+}
+
+const { node, context } = Astro.props;
+---
+
+{
+  isUploadNodeImageNode(node) ? (
+    <RTImage node={node} context={context} />
+  ) : (
+    <ErrorMessage
+      title={`Unknown upload collection: ${node.relationTo}`}
+      description="Please contact website technical administrator."
+    />
+  )
+}

src/components/RichText/components/RTUpload/components/RTImage.astro

@@ -0,0 +1,23 @@
+---
+import { type RichTextUploadImageNode } from "src/shared/payload/payload-sdk";
+import type { RichTextContext } from "src/utils/richText";
+
+interface Props {
+  node: RichTextUploadImageNode;
+  context: RichTextContext;
+}
+
+const { node } = Astro.props;
+---
+
+<img src={node.value.url} />
+
+<style>
+  img {
+    width: 100%;
+    height: auto;
+    margin-block: 3em;
+    border-radius: 16px;
+    box-shadow: 0 5px 20px -10px var(--color-shadow);
+  }
+</style>