From dd96f9a0583226f817ecb78961732670ded928b8 Mon Sep 17 00:00:00 2001
From: Paul <paul@payloadcms.com>
Date: Tue, 17 Sep 2024 18:00:00 -0600
Subject: [PATCH] fix(richtext-slate): fix issue with richText field cell not
 being a link when used as a useAsTitle (#8272)

---
 packages/richtext-slate/src/cell/index.tsx | 39 ++++++++++++++++++++--
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/packages/richtext-slate/src/cell/index.tsx b/packages/richtext-slate/src/cell/index.tsx
index aa2ce9f4c..ccd05b02c 100644
--- a/packages/richtext-slate/src/cell/index.tsx
+++ b/packages/richtext-slate/src/cell/index.tsx
@@ -1,13 +1,48 @@
 'use client'
 import type { DefaultCellComponentProps } from 'payload'
 
-import { useTableCell } from '@payloadcms/ui'
+import { useConfig, useTableCell } from '@payloadcms/ui'
+import { formatAdminURL } from '@payloadcms/ui/shared'
+import LinkImport from 'next/link.js'
 import React from 'react'
 
+const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default
+
 export const RichTextCell: React.FC<DefaultCellComponentProps<any[]>> = () => {
-  const { cellData } = useTableCell()
+  const { cellData, cellProps, columnIndex, customCellContext, rowData } = useTableCell()
   const flattenedText = cellData?.map((i) => i?.children?.map((c) => c.text)).join(' ')
 
+  const {
+    config: {
+      routes: { admin: adminRoute },
+    },
+  } = useConfig()
+
+  const { link } = cellProps || {}
+  let WrapElement: React.ComponentType<any> | string = 'span'
+
+  const wrapElementProps: {
+    className?: string
+    href?: string
+    onClick?: () => void
+    type?: 'button'
+  } = {}
+
+  const isLink = link !== undefined ? link : columnIndex === 0
+
+  if (isLink) {
+    WrapElement = Link
+    wrapElementProps.href = customCellContext?.collectionSlug
+      ? formatAdminURL({
+          adminRoute,
+          path: `/collections/${customCellContext?.collectionSlug}/${rowData.id}`,
+        })
+      : ''
+  }
+
+  if (isLink) {
+    return <WrapElement {...wrapElementProps}>{flattenedText}</WrapElement>
+  }
   // Limiting the number of characters shown is done in a CSS rule
   return <span>{flattenedText}</span>
 }