Make links visually distinguishable by default

[rubzie]

When creating a link in BlockNote, the linked text looks identical to regular text. Users must manually apply styling to make links recognizable.

Current Behavior

• Create a link with the link tool or Cmd+K
• Link has no visual distinction (no color change, no underline, no hover state)
• Must manually style each link

Expected Behavior

(tested on Blocknote site example and default implementation)
Links should be visually distinguishable by default, like in Notion and Slite (both use color by default).

Proposed Solution

Add default link styling that can be overridden:

const editor = useCreateBlockNote({
  linkStyling: {
    enabled: true, // default
    color: '#0066cc', // customizable
  }
});

Or include in the default theme:

.bn-container .bn-inline-content a {
  color: #0066cc;
}

Rationale

• UX standard: Notion, Slite, Google Docs all style links by default
• Accessibility: Links need visual distinction beyond hover state
• User friction: Manual styling for every link is tedious

Current Workaround

Custom CSS override (requires users to know about CSS customization and makes default behavior bad UX for a reader)

[YousefED]

Hi @rubzie!

This is likely caused by Tailwind unstyling all <a> tags.

You can reset this using CSS like:

.bn-editor a {
  color: revert;
  text-decoration: revert;
}

Thanks for pointing out the issue also occurs on our website; was triggered by our redesign last Thursday, you're quick!

[ ] We'll look into if this needs to be a default style in the editor Stylesheet (likely, yes. If not, add documentation)
[ ] investigate if this is also the case for other styles (for example, ones we set on .demo .bn-editor on the docs examples)
[ ] fix our website demo

[rubzie]

Not quick, just (un)lucky ;)