From 7307f6efee1f5c519127803dee678198ce556ed7 Mon Sep 17 00:00:00 2001
From: DrMint <29893320+DrMint@users.noreply.github.com>
Date: Wed, 13 Mar 2024 03:12:16 +0100
Subject: [PATCH] Added support for image node in RichText

---
 TODO.md                                       |  5 ++++
 .../RichText/components/RTNode.astro          |  4 ++++
 .../components/RTUpload/RTUpload.astro        | 24 +++++++++++++++++++
 .../RTUpload/components/RTImage.astro         | 23 ++++++++++++++++++
 4 files changed, 56 insertions(+)
 create mode 100644 src/components/RichText/components/RTUpload/RTUpload.astro
 create mode 100644 src/components/RichText/components/RTUpload/components/RTImage.astro

diff --git a/TODO.md b/TODO.md
index d352aaf..f64a36f 100644
--- a/TODO.md
+++ b/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
 
diff --git a/src/components/RichText/components/RTNode.astro b/src/components/RichText/components/RTNode.astro
index 135457e..4611734 100644
--- a/src/components/RichText/components/RTNode.astro
+++ b/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}`}
diff --git a/src/components/RichText/components/RTUpload/RTUpload.astro b/src/components/RichText/components/RTUpload/RTUpload.astro
new file mode 100644
index 0000000..4a4215d
--- /dev/null
+++ b/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."
+    />
+  )
+}
diff --git a/src/components/RichText/components/RTUpload/components/RTImage.astro b/src/components/RichText/components/RTUpload/components/RTImage.astro
new file mode 100644
index 0000000..1464a8f
--- /dev/null
+++ b/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>