add label to pictures
All checks were successful
Deploy Sokko G / deploy (push) Successful in 6s

This commit is contained in:
Shinuwa 2026-07-25 13:39:35 +02:00
parent ef5f977f8a
commit d7871736c8
10 changed files with 566 additions and 8 deletions

View file

@ -13,6 +13,12 @@ export function ScreenshotsModule({ toolboxId, moduleId, context, editing }) {
}
}
function updateShot(shotId, patch) {
context.setModuleData(toolboxId, moduleId, {
shots: data.shots.map((shot) => shot.id === shotId ? { ...shot, ...patch } : shot)
});
}
return (
<>
{editing && (
@ -66,6 +72,17 @@ export function ScreenshotsModule({ toolboxId, moduleId, context, editing }) {
<button className="shot-preview" onClick={() => context.setScreenshot(shot)} aria-label={textContent.previewAriaLabel || "Agrandir l'image"}>
<img src={shot.dataUrl} alt={textContent.imageAlt || "Image"} />
</button>
{editing ? (
<input
className="shot-label-input"
value={shot.label || ""}
placeholder={textContent.labelPlaceholder || "Libellé de l'image"}
onChange={(event) => updateShot(shot.id, { label: event.target.value })}
aria-label={textContent.labelAriaLabel || "Libellé de l'image"}
/>
) : shot.label ? (
<figcaption className="shot-label">{shot.label}</figcaption>
) : null}
<div className="shot-actions">
<button
className="shot-annotate-button"