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:
@@ -18,12 +18,18 @@ function ImageBlock({ block, onChange, disabled }) {
|
|||||||
}
|
}
|
||||||
}, [block.src, disabled]);
|
}, [block.src, disabled]);
|
||||||
|
|
||||||
function submit(e) {
|
function submit() {
|
||||||
e.preventDefault();
|
|
||||||
if (!url.trim()) return;
|
if (!url.trim()) return;
|
||||||
onChange?.({ src: url.trim() });
|
onChange?.({ src: url.trim() });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function handleKeyDown(e) {
|
||||||
|
if (e.key === 'Enter') {
|
||||||
|
e.preventDefault();
|
||||||
|
submit();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function handleAltChange(e) {
|
function handleAltChange(e) {
|
||||||
onChange?.({ alt: e.target.value });
|
onChange?.({ alt: e.target.value });
|
||||||
}
|
}
|
||||||
@@ -39,10 +45,7 @@ function ImageBlock({ block, onChange, disabled }) {
|
|||||||
|
|
||||||
if (!block.src) {
|
if (!block.src) {
|
||||||
return (
|
return (
|
||||||
<form
|
<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">
|
||||||
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"
|
|
||||||
>
|
|
||||||
<Image01Icon width={18} height={18} className="text-neutral-500" />
|
<Image01Icon width={18} height={18} className="text-neutral-500" />
|
||||||
<input
|
<input
|
||||||
ref={inputRef}
|
ref={inputRef}
|
||||||
@@ -50,17 +53,19 @@ function ImageBlock({ block, onChange, disabled }) {
|
|||||||
placeholder="URL de l'image (https://…)"
|
placeholder="URL de l'image (https://…)"
|
||||||
value={url}
|
value={url}
|
||||||
onChange={(e) => setUrl(e.target.value)}
|
onChange={(e) => setUrl(e.target.value)}
|
||||||
|
onKeyDown={handleKeyDown}
|
||||||
disabled={disabled}
|
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"
|
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
|
<button
|
||||||
type="submit"
|
type="button"
|
||||||
|
onClick={submit}
|
||||||
disabled={disabled || !url.trim()}
|
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"
|
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
|
Insérer
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user