Skip to content

fix(editor): replace broken edit link popover with custom dialog#118

Merged
j4rviscmd merged 1 commit intomainfrom
fix/edit-link-dialog
Mar 29, 2026
Merged

fix(editor): replace broken edit link popover with custom dialog#118
j4rviscmd merged 1 commit intomainfrom
fix/edit-link-dialog

Conversation

@j4rviscmd
Copy link
Copy Markdown
Owner

Summary

Replace BlockNote's nested Radix Popover (EditLinkButton) with a custom shadcn Dialog using the "Lifted Dialog" pattern. This fixes the Edit Link dialog failing to appear and focus jumping to the bottom of the document.

Also changes link click behavior to Cmd/Ctrl+Click (matching VS Code/Notion) and adds visual cursor feedback when modifier keys are held.

Related Issue

No existing issue — discovered during manual testing of the link toolbar.

Type of Change

  • ✨ New feature
  • 🐛 Bug fix
  • 📝 Documentation
  • ♻️ Refactoring
  • 🔧 Chore

Breaking Changes

None.

Test

  • Run npm run tauri dev
  • Create a link in the editor (select text → toolbar → link icon)
  • Click on the link text → cursor should be placed, link toolbar appears, browser does NOT open
  • Click "Edit" in the link toolbar → Edit Link dialog opens with URL and Text inputs
  • Edit URL/Text → press Enter or click Save → link is updated
  • Press Escape or Cancel → dialog closes without changes
  • Hold Cmd (macOS) / Ctrl (Windows) → cursor changes to pointer on links
  • Cmd/Ctrl+Click on link → opens in system browser
  • Test IME input (Japanese) in dialog inputs → Enter to confirm IME does NOT save

Checklist

  • Code follows clean architecture (proper separation of concerns)
  • Code is simple and concise (no unnecessary complexity)
  • Comments are sufficient for non-obvious logic
  • No sensitive information included (credentials, secrets, personal data)
  • Conventional Commits format followed in commit messages
  • Tests added/updated (or N/A for docs/chore)

Replace BlockNote's nested Radix Popover (EditLinkButton) with a custom
shadcn Dialog using the "Lifted Dialog" pattern. This fixes the dialog
failing to appear and focus jumping to the bottom of the document.

Changes:
- Add EditLinkButton.tsx: toolbar button with React Context for callback
  threading through LinkToolbarController
- Add EditLinkDialog.tsx: shadcn Dialog with URL/text inputs, IME
  composition guard, and BlockNote editLink() API integration
- Modify useLinkClickHandler.ts: intercept all link clicks to prevent
  TipTap's openOnClick handler; only Cmd/Ctrl+Click opens in browser
- Add cursor UX: text cursor on links by default, pointer when
  Cmd/Ctrl is held (matching VS Code/Notion behavior)
- Fix handleWrapperClick stealing focus from dialogs by adding
  role="dialog" guard

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@j4rviscmd j4rviscmd added the bug Something isn't working label Mar 29, 2026
@j4rviscmd j4rviscmd merged commit 96d9698 into main Mar 29, 2026
2 checks passed
@j4rviscmd j4rviscmd deleted the fix/edit-link-dialog branch March 29, 2026 05:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant