feature: image in richtext

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,

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

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;

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,