From 15a4db17c88f35c12cd3c68d761eaa7e03aae25b Mon Sep 17 00:00:00 2001
From: Benno Tielen <Benno@tielen.nl>
Date: Fri, 5 Jun 2026 11:37:33 +0200
Subject: [PATCH] feature: image in richtext

---
 src/app/(payload)/admin/importMap.js     |  2 ++
 src/components/Text/converters.tsx       | 21 +++++++++++++++++++++
 src/components/Text/richtext.module.scss |  5 +++++
 src/payload.config.ts                    |  6 +++++-
 4 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/app/(payload)/admin/importMap.js b/src/app/(payload)/admin/importMap.js
index 1077720..a5bf5d7 100644
--- a/src/app/(payload)/admin/importMap.js
+++ b/src/app/(payload)/admin/importMap.js
@@ -6,6 +6,7 @@ import { FixedToolbarFeatureClient as FixedToolbarFeatureClient_e70f5e05f09f93e0
 import { InlineToolbarFeatureClient as InlineToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { ParagraphFeatureClient as ParagraphFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { LinkFeatureClient as LinkFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { UploadFeatureClient as UploadFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { UnorderedListFeatureClient as UnorderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { AlignFeatureClient as AlignFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { HeadingFeatureClient as HeadingFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
@@ -29,6 +30,7 @@ export const importMap = {
   "@payloadcms/richtext-lexical/client#InlineToolbarFeatureClient": InlineToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@payloadcms/richtext-lexical/client#ParagraphFeatureClient": ParagraphFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@payloadcms/richtext-lexical/client#LinkFeatureClient": LinkFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#UploadFeatureClient": UploadFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@payloadcms/richtext-lexical/client#UnorderedListFeatureClient": UnorderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@payloadcms/richtext-lexical/client#AlignFeatureClient": AlignFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@payloadcms/richtext-lexical/client#HeadingFeatureClient": HeadingFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
diff --git a/src/components/Text/converters.tsx b/src/components/Text/converters.tsx
index 6c2bc48..16eafa5 100644
--- a/src/components/Text/converters.tsx
+++ b/src/components/Text/converters.tsx
@@ -1,7 +1,9 @@
 import type { JSXConvertersFunction } from '@payloadcms/richtext-lexical/react'
 import { LinkJSXConverter } from '@payloadcms/richtext-lexical/react'
 import type { SerializedLinkNode } from '@payloadcms/richtext-lexical'
+import Image from 'next/image'
 import { Button } from '@/components/Button/Button'
+import { getPhoto } from '@/utils/dto/gallery'
 
 type LinkFields = SerializedLinkNode['fields'] & {
   appearance?: 'link' | 'button'
@@ -37,6 +39,25 @@ const linkConverters = LinkJSXConverter({ internalDocToHref })
 export const jsxConverters: JSXConvertersFunction = ({ defaultConverters }) => ({
   ...defaultConverters,
   ...linkConverters,
+  // Render uploaded media at the "gallery" size (500px tall, variable width).
+  upload: ({ node }) => {
+    if (node.relationTo !== 'media' || typeof node.value !== 'object') {
+      return null
+    }
+
+    const photo = getPhoto('gallery', node.value)
+    if (!photo) return null
+
+    return (
+      <Image
+        src={photo.src}
+        width={photo.width}
+        height={photo.height}
+        alt={node.value.alt}
+        unoptimized={true}
+      />
+    )
+  },
   link: (args) => {
     const { node, nodesToJSX } = args
     const fields = node.fields as LinkFields
diff --git a/src/components/Text/richtext.module.scss b/src/components/Text/richtext.module.scss
index 4871025..22abb05 100644
--- a/src/components/Text/richtext.module.scss
+++ b/src/components/Text/richtext.module.scss
@@ -12,6 +12,11 @@
   color: $base-color;
 }
 
+.container img {
+  max-width: 100%;
+  height: auto;
+}
+
 .container h3 {
   font-size: 33px;
   font-weight: 700;
diff --git a/src/payload.config.ts b/src/payload.config.ts
index 997f604..b59d7bf 100644
--- a/src/payload.config.ts
+++ b/src/payload.config.ts
@@ -10,7 +10,7 @@ import {
   AlignFeature,
   UnorderedListFeature,
   LinkFeature,
-  FixedToolbarFeature,
+  FixedToolbarFeature, UploadFeature,
 } from '@payloadcms/richtext-lexical'
 import path from 'path'
 import { buildConfig } from 'payload'
@@ -142,6 +142,10 @@ export default buildConfig({
         HeadingFeature({ enabledHeadingSizes: ["h3","h4","h5"]}),
         AlignFeature(),
         UnorderedListFeature(),
+        UploadFeature({
+            enabledCollections: ['media']
+        }
+        ),
         LinkFeature({
           fields: ({ defaultFields }) => [
             ...defaultFields,