Skip to content

fix: Clicking comment overlapping link opens link (BLO-1091)#2696

Merged
matthewlipski merged 6 commits intomainfrom
comment-link-click
May 1, 2026
Merged

fix: Clicking comment overlapping link opens link (BLO-1091)#2696
matthewlipski merged 6 commits intomainfrom
comment-link-click

Conversation

@matthewlipski
Copy link
Copy Markdown
Collaborator

@matthewlipski matthewlipski commented Apr 30, 2026

Summary

This PR makes it so that when clicking a comment overlapping a link, the first click only shows the comment. The second click then opens the link.

Closes #2572

Rationale

This is better for UX.

Changes

  • Wrapped comments ProseMirror plugin in TipTap extension to be able to set priority of 1500 (higher than link extension).
  • Added return values to comments plugin click handler to prevent link click handler from firing when initially selecting comment.

Impact

N/A

Testing

Added e2e test.

Screenshots/Video

N/A

Checklist

  • Code follows the project's coding standards.
  • Unit tests covering the new feature have been added.
  • All existing tests pass.
  • The documentation has been updated to reflect the new feature

Additional Notes

N/A

Summary by CodeRabbit

  • Bug Fixes

    • Inline links in comment threads: first click now selects the thread without navigating; repeated clicks open the link and avoid unnecessary state changes.
  • Tests

    • Added end-to-end test coverage for inline link interactions in comment threads.
  • New Features

    • Added a configurable link wrapper to customize link attributes and click behavior.
  • Refactor

    • Adjusted extension initialization order and tightened click-handling for more consistent comment/link interactions.

@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 30, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
blocknote Ready Ready Preview May 1, 2026 10:43am
blocknote-website Ready Ready Preview May 1, 2026 10:43am

Request Review

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 30, 2026

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 84544256-c252-4337-b881-9a059e04ce72

📥 Commits

Reviewing files that changed from the base of the PR and between 23b7edb and 27b888a.

⛔ Files ignored due to path filters (1)
  • packages/xl-ai/src/prosemirror/__snapshots__/agent.test.ts.snap is excluded by !**/*.snap, !**/__snapshots__/**
📒 Files selected for processing (1)
  • packages/core/src/extensions/tiptap-extensions/Link/link.ts

📝 Walkthrough

Walkthrough

CommentsExtension now runs before the link extension and registers CommentMark in its tiptap extensions. ProseMirror click handling was tightened to return explicit booleans: ignore non-left/irrelevant clicks, no-op when clicking the already-selected thread, and select a different thread (preventing immediate navigation). An E2E test for two-click link/thread behavior was added.

Changes

Cohort / File(s) Summary
Comments Extension
packages/core/src/comments/extension.ts
Add runsBefore: ["link"], include CommentMark in returned tiptapExtensions, and tighten prosemirrorPlugins handleClick to return explicit booleans: ignore non-left clicks/irrelevant hits, no-op when clicking already-selected thread, set selectedThreadId and return true when switching threads.
Link extension API & exports
packages/core/src/extensions/tiptap-extensions/Link/link.ts, packages/core/src/extensions/tiptap-extensions/Link/index.ts
Remove explicit priority from Link mark; add LinkExtension and LinkExtensionOptions wrapper that registers Link and forwards HTMLAttributes/onClick/isValidLink; export LinkExtension from the index.
Extension manager defaults
packages/core/src/editor/managers/ExtensionManager/extensions.ts
Move default Link setup into getDefaultExtensions using LinkExtension(...), removing prior injection of editor into the tiptap extensions array.
End-to-end tests
tests/src/end-to-end/comments/comments.test.ts
Add E2E test validating two-click behavior for inline link threads (skips on WebKit): first click selects thread without navigation, second click triggers navigation (waits for popup).

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant Editor
  participant CommentsPlugin as Comments Plugin
  participant Browser

  User->>Editor: Left-click inline link mark
  Editor->>CommentsPlugin: handleClick(event, pos, mark)
  alt non-left click or no relevant node
    CommentsPlugin-->>Editor: return false
    Editor-->>Browser: allow default behavior (navigation)
  else click on comment mark
    CommentsPlugin->>CommentsPlugin: if threadId == selectedThreadId\nreturn false (no state change)
    alt clicked different thread
      CommentsPlugin->>CommentsPlugin: set selectedThreadId
      CommentsPlugin-->>Editor: return true (event handled)
      Editor-->>User: comment selected (prevent navigation)
    end
    Note right of Editor: second click / unhandled -> Browser navigation (popup)
  end
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested reviewers

  • nperez0111

Poem

🐰 I nudged a link with careful paws,

The thread first shone, no sudden pause.
A second hop — the page took flight,
Two clicks, two acts, everything right.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and specifically describes the main fix: preventing link navigation when clicking a comment that overlaps a link, and references the linked issue (BLO-1091).
Description check ✅ Passed The description covers all major template sections: Summary, Rationale, Changes, Impact, Testing, and Checklist. All checkboxes are marked complete indicating standards compliance and test coverage.
Linked Issues check ✅ Passed The PR fully implements the requirements from issue #2572: comments handler runs before link handler via priority ordering, click handler returns explicit booleans to prevent link firing on comment selection, and the behavior now matches the Notion-like expectation of show-comment-first then open-link-second.
Out of Scope Changes check ✅ Passed All changes are directly scoped to fixing the comment-link click conflict: comments extension wrapping, click handler logic, link extension restructuring, and corresponding e2e test. No extraneous changes detected.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch comment-link-click

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
Review rate limit: 6/8 reviews remaining, refill in 11 minutes and 29 seconds.

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
tests/src/end-to-end/comments/comments.test.ts (1)

64-66: ⚡ Quick win

Replace fixed sleeps with condition-based waits to reduce flakiness.

waitForTimeout(500) here can make the test brittle; Playwright assertions already auto-wait on DOM state.

Proposed refactor
-    await page.keyboard.press("ArrowDown");
-    await page.waitForTimeout(500);
-    await expect(page.locator(".bn-thread-mark-selected")).toHaveCount(0);
+    await page.keyboard.press("ArrowDown");
+    await expect(page.locator(".bn-thread-mark-selected")).toHaveCount(0);

     const link = page.locator('a[data-inline-content-type="link"]').first();

     // First click selects the thread without navigating.
     await link.click();
-    await page.waitForTimeout(500);
     await expect(page.locator(".bn-thread-mark-selected")).toBeVisible();

Also applies to: 71-74

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@tests/src/end-to-end/comments/comments.test.ts` around lines 64 - 66, After
sending the ArrowDown key, remove the fixed sleep (page.waitForTimeout(500)) and
replace it with a condition-based wait: rely on the Playwright auto-waiting
assert (expect(page.locator(".bn-thread-mark-selected")).toHaveCount(0)) or
explicitly wait for the selector to be detached
(page.waitForSelector(".bn-thread-mark-selected", { state: "detached" })); apply
the same change to the similar block referenced at lines 71-74 so tests no
longer use fixed sleeps and instead wait for the DOM condition.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@tests/src/end-to-end/comments/comments.test.ts`:
- Around line 64-66: After sending the ArrowDown key, remove the fixed sleep
(page.waitForTimeout(500)) and replace it with a condition-based wait: rely on
the Playwright auto-waiting assert
(expect(page.locator(".bn-thread-mark-selected")).toHaveCount(0)) or explicitly
wait for the selector to be detached
(page.waitForSelector(".bn-thread-mark-selected", { state: "detached" })); apply
the same change to the similar block referenced at lines 71-74 so tests no
longer use fixed sleeps and instead wait for the DOM condition.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c231b05f-8164-45d8-a796-250f500cde39

📥 Commits

Reviewing files that changed from the base of the PR and between d48a92a and ed4aa14.

📒 Files selected for processing (2)
  • packages/core/src/comments/extension.ts
  • tests/src/end-to-end/comments/comments.test.ts

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Apr 30, 2026

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/@blocknote/ariakit@2696

@blocknote/code-block

npm i https://pkg.pr.new/@blocknote/code-block@2696

@blocknote/core

npm i https://pkg.pr.new/@blocknote/core@2696

@blocknote/mantine

npm i https://pkg.pr.new/@blocknote/mantine@2696

@blocknote/react

npm i https://pkg.pr.new/@blocknote/react@2696

@blocknote/server-util

npm i https://pkg.pr.new/@blocknote/server-util@2696

@blocknote/shadcn

npm i https://pkg.pr.new/@blocknote/shadcn@2696

@blocknote/xl-ai

npm i https://pkg.pr.new/@blocknote/xl-ai@2696

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/@blocknote/xl-docx-exporter@2696

@blocknote/xl-email-exporter

npm i https://pkg.pr.new/@blocknote/xl-email-exporter@2696

@blocknote/xl-multi-column

npm i https://pkg.pr.new/@blocknote/xl-multi-column@2696

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/@blocknote/xl-odt-exporter@2696

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/@blocknote/xl-pdf-exporter@2696

commit: 27b888a

Comment thread packages/core/src/comments/extension.ts Outdated
Comment thread tests/src/end-to-end/comments/comments.test.ts Outdated
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (1)
tests/src/end-to-end/comments/comments.test.ts (1)

64-73: ⚡ Quick win

Drop the fixed 500 ms waits here.

These sleeps make the test slower and more timing-sensitive in CI. The expect(...) calls already auto-wait for the selection state, so you can wait on the DOM signal directly instead of pausing twice.

Suggested cleanup
     await page.keyboard.press("ArrowDown");
-    await page.waitForTimeout(500);
     await expect(page.locator(".bn-thread-mark-selected")).toHaveCount(0);

     const link = page.locator('a[data-inline-content-type="link"]').first();

     // First click selects the thread without navigating.
     await link.click();
-    await page.waitForTimeout(500);
     await expect(page.locator(".bn-thread-mark-selected")).toBeVisible();
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@tests/src/end-to-end/comments/comments.test.ts` around lines 64 - 73, Remove
the fixed 500ms sleeps and rely on Playwright's auto-waiting assertions: delete
the two await page.waitForTimeout(500) calls around the keyboard press and
link.click, keep the existing awaits for
expect(page.locator(".bn-thread-mark-selected")).toHaveCount(0) and await
expect(page.locator(".bn-thread-mark-selected")).toBeVisible() so the test waits
on the DOM signal instead of sleeping; ensure you still call await link.click()
and await page.keyboard.press("ArrowDown") as shown.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/core/src/comments/extension.ts`:
- Line 228: Remove the debug console.log("comments") call that is firing on
every click in the comments plugin; locate the plain console.log("comments")
statement in the comments extension code (the comments plugin/extension
initialization or click handler) and delete it (or replace with a conditional
logger call such as processLogger.debug or a no-op) so browser and test output
are no longer spammed.
- Around line 249-264: The click handler currently treats a missing commentMark
as threadId === undefined and proceeds to clear selectedThreadId and return
true; change it so that if commentMark is falsy you immediately return false (do
not call store.setState or modify selectedThreadId), and only run the existing
logic (compare threadId to store.state.selectedThreadId, call store.setState to
update selectedThreadId, and return true) when commentMark exists and provides a
threadId; reference commentMark, threadId, store.setState, and selectedThreadId
to locate the code to adjust.

---

Nitpick comments:
In `@tests/src/end-to-end/comments/comments.test.ts`:
- Around line 64-73: Remove the fixed 500ms sleeps and rely on Playwright's
auto-waiting assertions: delete the two await page.waitForTimeout(500) calls
around the keyboard press and link.click, keep the existing awaits for
expect(page.locator(".bn-thread-mark-selected")).toHaveCount(0) and await
expect(page.locator(".bn-thread-mark-selected")).toBeVisible() so the test waits
on the DOM signal instead of sleeping; ensure you still call await link.click()
and await page.keyboard.press("ArrowDown") as shown.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 01d76749-11b6-49c8-846a-e1908f4a06e4

📥 Commits

Reviewing files that changed from the base of the PR and between ed4aa14 and 4928547.

📒 Files selected for processing (5)
  • packages/core/src/comments/extension.ts
  • packages/core/src/editor/managers/ExtensionManager/extensions.ts
  • packages/core/src/extensions/tiptap-extensions/Link/index.ts
  • packages/core/src/extensions/tiptap-extensions/Link/link.ts
  • tests/src/end-to-end/comments/comments.test.ts
✅ Files skipped from review due to trivial changes (1)
  • packages/core/src/extensions/tiptap-extensions/Link/index.ts

Comment thread packages/core/src/comments/extension.ts Outdated
Comment thread packages/core/src/comments/extension.ts Outdated
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

♻️ Duplicate comments (1)
packages/core/src/comments/extension.ts (1)

261-274: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Guard missing threadId before consuming the click.

threadId is force-cast on Line 261, but this file already handles thread ids as optional elsewhere. If a malformed mark lacks threadId, this path can still update state and consume the click unexpectedly. Add a runtime guard and return false when threadId is absent.

Suggested patch
-              const threadId = commentMark.attrs.threadId as string;
+              const threadId = commentMark.attrs.threadId as
+                | string
+                | undefined;
+
+              if (!threadId) {
+                if (store.state.selectedThreadId !== undefined) {
+                  store.setState((prev) => ({
+                    ...prev,
+                    selectedThreadId: undefined,
+                  }));
+                }
+                return false;
+              }

               // If the clicked thread is already selected, do nothing and let
               // other handlers process the event (e.g. navigating a link).
               if (threadId === store.state.selectedThreadId) {
                 return false;
               }
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/core/src/comments/extension.ts` around lines 261 - 274, The click
handler currently force-casts commentMark.attrs.threadId to threadId and may
consume the click even when missing; add a runtime guard that checks whether
commentMark.attrs.threadId is present (e.g., falsy/undefined) before proceeding,
and return false immediately if it's absent; only then compare with
store.state.selectedThreadId and call store.setState to update selectedThreadId
when a valid threadId exists.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Duplicate comments:
In `@packages/core/src/comments/extension.ts`:
- Around line 261-274: The click handler currently force-casts
commentMark.attrs.threadId to threadId and may consume the click even when
missing; add a runtime guard that checks whether commentMark.attrs.threadId is
present (e.g., falsy/undefined) before proceeding, and return false immediately
if it's absent; only then compare with store.state.selectedThreadId and call
store.setState to update selectedThreadId when a valid threadId exists.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 55191038-7cc9-43e4-96ef-b833f5df4b24

📥 Commits

Reviewing files that changed from the base of the PR and between f6b467f and 23b7edb.

📒 Files selected for processing (1)
  • packages/core/src/comments/extension.ts

@matthewlipski matthewlipski merged commit f6717b3 into main May 1, 2026
23 checks passed
@matthewlipski matthewlipski deleted the comment-link-click branch May 1, 2026 11:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Can't click to see comment w/ link

2 participants