fix(richtext-lexical): use thumbnail component for uploads (#12540)

### What?

Fix the broken thumbnail for non-images for uploads in the
richtext-lexical editor.

**Before:**

![before](https://github.com/user-attachments/assets/dbe5ffb7-9032-435b-8684-3c8bf53ae5bd)

**After:**

![after](https://github.com/user-attachments/assets/1c4af50e-2216-4ada-aff0-7a5e5559ac64)


### Why?

As described in #6867, the thumbnail in the richtext-lexical editor is
always trying to render an thumbnail image. This leads to a broken image
as soon as a non-image is added.

### How?

The fix was done by using the `<Thumbnail />` component from
`@payloadcms/ui`

Fixes #6867

---------

Co-authored-by: German Jablonski <43938777+GermanJablo@users.noreply.github.com>

packages/richtext-lexical/src/features/upload/client/component/index.tsx

@@ -5,14 +5,15 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 import { getTranslation } from '@payloadcms/translations'
 import {
   Button,
-  File,
   formatDrawerSlug,
+  Thumbnail,
   useConfig,
   useEditDepth,
   usePayloadAPI,
   useTranslation,
 } from '@payloadcms/ui'
 import { $getNodeByKey } from 'lexical'
+import { isImage } from 'payload/shared'
 import React, { useCallback, useId, useReducer, useRef, useState } from 'react'
 
 import type { BaseClientFeatureProps } from '../../../typesClient.js'
@@ -142,18 +143,11 @@ const Component: React.FC<ElementProps> = (props) => {
     <div className={baseClass} contentEditable={false} ref={uploadRef}>
       <div className={`${baseClass}__card`}>
         <div className={`${baseClass}__topRow`}>
-          {/* TODO: migrate to use @payloadcms/ui/elements/Thumbnail component */}
           <div className={`${baseClass}__thumbnail`}>
-            {thumbnailSRC ? (
-              <img
-                alt={data?.filename}
-                data-lexical-upload-id={value}
-                data-lexical-upload-relation-to={relationTo}
-                src={thumbnailSRC}
-              />
-            ) : (
-              <File />
-            )}
+            <Thumbnail
+              collectionSlug={relationTo}
+              fileSrc={isImage(data?.mimeType) ? thumbnailSRC : null}
+            />
           </div>
           <div className={`${baseClass}__topRowRightPanel`}>
             <div className={`${baseClass}__collectionLabel`}>

packages/ui/src/graphics/File/index.tsx

@@ -1,8 +1,13 @@
 import React from 'react'
 
 export const File: React.FC = () => (
-  <svg height="150" viewBox="0 0 150 150" width="150" xmlns="http://www.w3.org/2000/svg">
-    <rect fill="#333333" height="150" transform="translate(0 0.5)" width="150" />
+  <svg
+    height="150"
+    style={{ backgroundColor: '#333333' }}
+    viewBox="0 0 150 150"
+    width="150"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path d="M82.8876 50.5H55.5555V100.5H94.4444V61.9818H82.8876V50.5Z" fill="white" />
     <path d="M82.8876 61.9818H94.4444L82.8876 50.5V61.9818Z" fill="#9A9A9A" />
   </svg>