Citali/v2.admin.gaertan.art
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix the about page image display

Browse Source
This commit is contained in:
Citali
2026-02-05 16:08:53 +01:00
parent 25093606c9
commit 9571b5b649
1 changed files with 16 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/ui/image-node.tsx
View File

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