fix(ui): replace form submit with explicit key and click handlers in image block

- remove form element and onSubmit in favor of a plain div
- add handleKeyDown to trigger submit on Enter key press
- attach onClick handler directly to the insert button with type="button"
This commit is contained in:
2026-04-26 16:03:28 -04:00
parent b721574e58
commit 5ecbf13348
@@ -18,12 +18,18 @@ function ImageBlock({ block, onChange, disabled }) {
}
}, [block.src, disabled]);
function submit(e) {
e.preventDefault();
function submit() {
if (!url.trim()) return;
onChange?.({ src: url.trim() });
}
function handleKeyDown(e) {
if (e.key === 'Enter') {
e.preventDefault();
submit();
}
}
function handleAltChange(e) {
onChange?.({ alt: e.target.value });
}
@@ -39,10 +45,7 @@ function ImageBlock({ block, onChange, disabled }) {
if (!block.src) {
return (
<form
onSubmit={submit}
className="flex items-center gap-2 rounded-lg border border-dashed border-neutral-300 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800/40 px-3 py-3"
>
<div className="flex items-center gap-2 rounded-lg border border-dashed border-neutral-300 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800/40 px-3 py-3">
<Image01Icon width={18} height={18} className="text-neutral-500" />
<input
ref={inputRef}
@@ -50,17 +53,19 @@ function ImageBlock({ block, onChange, disabled }) {
placeholder="URL de l'image (https://…)"
value={url}
onChange={(e) => setUrl(e.target.value)}
onKeyDown={handleKeyDown}
disabled={disabled}
className="flex-1 px-2 py-1 text-sm rounded border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white outline-none focus:border-blue-500"
/>
<button
type="submit"
type="button"
onClick={submit}
disabled={disabled || !url.trim()}
className="px-3 py-1 text-sm rounded bg-blue-600 hover:bg-blue-700 disabled:opacity-50 disabled:hover:bg-blue-600 text-white"
>
Insérer
</button>
</form>
</div>
);
}