fix(ui): replace form with div in link popover to prevent unintended submit behavior

- swap `<form>` wrapper for `<div>` to avoid native form submission
- add `onKeyDown` handler on input to trigger submit on Enter key
- change button type from `submit` to `button` with explicit `onClick` handler
This commit is contained in:
2026-04-26 15:03:17 -04:00
parent 43d2328082
commit 62cfb76d99
@@ -175,8 +175,7 @@ export default function InlineToolbar({ rect, activeMarks, onToggleMark, onClear
/> />
)} )}
{popover === 'link' && ( {popover === 'link' && (
<form <div
onSubmit={handleLinkSubmit}
className="absolute top-full left-0 mt-1 flex flex-col gap-1.5 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 shadow-md px-2 py-1.5" className="absolute top-full left-0 mt-1 flex flex-col gap-1.5 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 shadow-md px-2 py-1.5"
> >
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
@@ -186,10 +185,12 @@ export default function InlineToolbar({ rect, activeMarks, onToggleMark, onClear
placeholder="https://..." placeholder="https://..."
value={linkUrl} value={linkUrl}
onChange={(e) => setLinkUrl(e.target.value)} onChange={(e) => setLinkUrl(e.target.value)}
onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); handleLinkSubmit(e); } }}
className="w-56 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="w-56 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={handleLinkSubmit}
className="px-2 py-1 text-xs rounded bg-blue-600 hover:bg-blue-700 text-white" className="px-2 py-1 text-xs rounded bg-blue-600 hover:bg-blue-700 text-white"
> >
OK OK
@@ -214,7 +215,7 @@ export default function InlineToolbar({ rect, activeMarks, onToggleMark, onClear
/> />
Ouvrir dans un nouvel onglet Ouvrir dans un nouvel onglet
</label> </label>
</form> </div>
)} )}
</div> </div>
); );