Skip to content

Commit

Permalink
Fix link bubble menu state when clicking out or changing selection
Browse files Browse the repository at this point in the history
This avoids a focus-jump when clicking away from the "Edit" form, by
ensuring the bubble menu state is kept in sync. An extra precautionary
fallback to `?? ""` is added for the `currentHref` just in case the menu
renders when unexpected and no `href` is available, since this can cause
a crash (though that scenario is likely resolved by our more deliberate
menu-closing, and handled here just as a defensive precaution).
  • Loading branch information
sjdemartini committed Jun 16, 2023
1 parent b5c2d72 commit 5a29ae1
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 8 deletions.
3 changes: 2 additions & 1 deletion src/LinkBubbleMenu/ViewLinkMenuContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ export default function ViewLinkMenuContent({
? editor.state.doc.textBetween(linkRange.from, linkRange.to)
: "";

const currentHref = editor.getAttributes("link").href as string;
const currentHref =
(editor.getAttributes("link").href as string | undefined) ?? "";

// If the user presses escape, we should cancel
useKeyDown("Escape", onCancel);
Expand Down
23 changes: 16 additions & 7 deletions src/extensions/LinkBubbleMenuHandler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -132,13 +132,22 @@ const LinkBubbleMenuHandler = Extension.create<
},

onSelectionUpdate() {
// To ensure we maintain the proper bubble menu state, if someone is viewing
// an existing link but moves off of it (e.g. with their keyboard), we'll
// close the bubble menu. Note that we only do this for "view" (and not
// "edit"), since when adding a new link, there is not yet a link at the
// current position and the user's focus will be in the edit form anyway,
// where clicking out would already close the menu.
if (
// To ensure we maintain the proper bubble menu state, if someone is
// viewing/editing a link but moves off of it (e.g. with their keyboard
// arrow keys, or by clicking out, or by typing over the currently selected
// link), we'll close the bubble menu. Note that when in "view" mode (and
// not "edit") for an existing link, we only close if the state shows the
// user is not on an active link anymore, since the selection can be updated
// via `openLinkBubbleMenu` (and we don't want to immediately close it upon
// initial opening of the bubble menu). By contrast in "edit" mode, the
// user's focus should be in the edit form and selection shouldn't
// automatically update during opening or otherwise, so clicking out (i.e.
// changing selection) definitively indicates cancellation.
// onSelectionUpdate runs before handleClick, so we need to promptly close
// in that scenario.
if (this.storage.state === LinkMenuState.EDIT_LINK) {
this.editor.commands.closeLinkBubbleMenu();
} else if (
this.storage.state === LinkMenuState.VIEW_LINK_DETAILS &&
!this.editor.isActive("link")
) {
Expand Down

0 comments on commit 5a29ae1

Please sign in to comment.