{
// Prevent editor blur when clicking bubble buttons, but let inputs
@@ -278,7 +290,28 @@ export function RichMarkdownLinkBubble({
e.preventDefault()
}
}}
- onKeyDown={(e) => e.stopPropagation()}
+ onKeyDown={(event) => {
+ event.stopPropagation()
+ if (event.key === 'Escape') {
+ event.preventDefault()
+ onDismiss()
+ anchorElement?.querySelector
('[contenteditable="true"]')?.focus()
+ return
+ }
+ if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {
+ return
+ }
+ const buttons = Array.from(
+ bubbleRef.current?.querySelectorAll('button:not([disabled])') ?? []
+ )
+ const currentIndex = buttons.indexOf(document.activeElement as HTMLButtonElement)
+ if (currentIndex === -1 || buttons.length === 0) {
+ return
+ }
+ event.preventDefault()
+ const direction = event.key === 'ArrowRight' ? 1 : -1
+ buttons[(currentIndex + direction + buttons.length) % buttons.length]?.focus()
+ }}
>
{isEditing ? (
@@ -287,39 +320,45 @@ export function RichMarkdownLinkBubble({
{linkBubble.href.length > 40 ? `${linkBubble.href.slice(0, 40)}…` : linkBubble.href}
-
-
-
+
+
+ {linkBubble.kind === 'markdown' ? (
+ <>
+
+
+
+
+
+
+
+ ) : null}
)}