Fix the about page image display

src/components/ui/image-node.tsx

@@ -1,10 +1,15 @@
 'use client';
 
-import * as React from 'react';
 
 import type { PlateElementProps } from 'platejs/react';
 
-import { PlateElement, useEditorRef, useFocused, useReadOnly, useSelected, useElement } from 'platejs/react';
+import Image from 'next/image';
+import {
+  PlateElement,
+  useEditorRef,
+  useElement,
+  useReadOnly
+} from 'platejs/react';
 
 import { cn } from '@/lib/utils';
 
@@ -18,26 +23,25 @@ type ImageElementData = {
 
 export function ImageElement(props: PlateElementProps) {
   const editor = useEditorRef();
-  const element = useElement<ImageElementData>();
+  const element = useElement();
   const readOnly = useReadOnly();
-  const selected = useSelected();
-  const focused = useFocused();
-  const data = element ?? (props.element as ImageElementData);
+  const data = (element ?? props.element) as ImageElementData;
   const src = data.url ?? data.src;
   const captionText =
     data.caption?.map((c) => c.text).join('') ?? data.alt ?? data.altText ?? '';
   const showCaptionEditor = !readOnly;
-  const path = showCaptionEditor ? editor.api.findPath(element) : null;
+  const path = showCaptionEditor ? editor.api.findPath(element ?? props.element) : null;
 
   return (
     <PlateElement {...props} className={cn('my-4')}>
       <figure className="w-full">
-        {src ? (
-          <img
+        {src && typeof src === 'string' ? (
+          <Image
             src={src}
             alt={captionText}
-            className="max-w-full rounded-md border border-border"
-            loading="lazy"
+            width={1200}
+            height={800}
+            className="max-w-full h-auto rounded-md border border-border"
             contentEditable={false}
           />
         ) : (
@@ -54,10 +58,7 @@ export function ImageElement(props: PlateElementProps) {
               value={captionText}
               onChange={(e) => {
                 if (!path) return;
-                editor.tf.setNodes<ImageElementData>(
-                  { caption: [{ text: e.target.value }] },
-                  { at: path }
-                );
+                editor.tf.setNodes({ caption: [{ text: e.target.value }] }, { at: path });
               }}
               placeholder="Add caption / alt text"
               className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"