shadowdao
802938ec1a
BlocksPanel dropped a new Image block with an explicit `src=""` prop, which overrides ImageBlock's `src = PLACEHOLDER_SRC` default parameter (defaults only apply when a prop is undefined, not when it's an empty string). Craft then persisted `src:''`, and the canvas rendered a broken-image icon instead of the placeholder. - ImageBlock render now falls back to PLACEHOLDER_SRC whenever src is falsy (belt-and-braces: also recovers any legacy saved src:'' state). - BlocksPanel no longer passes src="" when dropping a new Image block, so the craft default applies. - ImageStylePanel now restores the placeholder (instead of blanking to '') when the URL field is cleared. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
74 lines
2.1 KiB
TypeScript
74 lines
2.1 KiB
TypeScript
import React, { CSSProperties } from 'react';
|
|
import { useEditor } from '@craftjs/core';
|
|
import {
|
|
IMAGE_RADIUS_PRESETS,
|
|
} from '../../../constants/presets';
|
|
import {
|
|
StylePanelProps,
|
|
SectionLabel,
|
|
PresetButtonGrid,
|
|
TextInputField,
|
|
useNodeProp,
|
|
} from './shared';
|
|
import { AssetPicker } from '../../../ui/AssetPicker';
|
|
import { PLACEHOLDER_SRC } from '../../../components/media/ImageBlock';
|
|
|
|
/* ---------- IMAGE (with upload/browse/drop) ---------- */
|
|
export const ImageStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps }) => {
|
|
const { actions } = useEditor();
|
|
const style: CSSProperties = nodeProps.style || {};
|
|
|
|
const { setPropStyle } = useNodeProp(selectedId);
|
|
|
|
const maxWidthPresets = [
|
|
{ label: '25%', value: '25%' },
|
|
{ label: '50%', value: '50%' },
|
|
{ label: '75%', value: '75%' },
|
|
{ label: '100%', value: '100%' },
|
|
];
|
|
|
|
return (
|
|
<>
|
|
{/* Image source */}
|
|
<div className="guided-section">
|
|
<SectionLabel>Image Source</SectionLabel>
|
|
<AssetPicker
|
|
value={nodeProps.src || ''}
|
|
onChange={(url) => actions.setProp(selectedId, (props: any) => { props.src = url || PLACEHOLDER_SRC; })}
|
|
variant="full"
|
|
/>
|
|
</div>
|
|
|
|
{/* Alt Text */}
|
|
<TextInputField
|
|
label="Alt Text"
|
|
value={nodeProps.alt || ''}
|
|
placeholder="Describe the image..."
|
|
onChange={(v) => {
|
|
actions.setProp(selectedId, (props: any) => { props.alt = v; });
|
|
}}
|
|
/>
|
|
|
|
{/* Border Radius */}
|
|
<div className="guided-section">
|
|
<SectionLabel>Border Radius</SectionLabel>
|
|
<PresetButtonGrid
|
|
presets={IMAGE_RADIUS_PRESETS}
|
|
activeValue={style.borderRadius as string}
|
|
onSelect={(v) => setPropStyle('borderRadius', v)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Max Width */}
|
|
<div className="guided-section">
|
|
<SectionLabel>Max Width</SectionLabel>
|
|
<PresetButtonGrid
|
|
presets={maxWidthPresets}
|
|
activeValue={style.maxWidth as string}
|
|
onSelect={(v) => setPropStyle('maxWidth', v)}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|