Skip to content

Distinguishing link types #1861

@ClementEXWiki

Description

@ClementEXWiki

Is your feature request related to a problem? Please describe.
We currently need a very important feature that is not present in BlockNote.

Our documents can contain two types of links: they can either refer to external resources (URLs), or internal resources (documents, wikis, etc.). Inside the editor, these internal links are encoded with a complete URL for ease of use.

We need to make internal and external links visually distinct. The current design would be to add an icon after the label of external links, but this could change in the future.

It's pretty high priority for us, I'm not sure how hard it could be to implement, but if this is doable on your side, it would be very appreciated :)

Describe the solution you'd like
There are multiple ways this could be implemented, the easiest being attaching an internal: true property to links in BlockNote's AST, that would then be reflected in the DOM (e.g. a data attribute such as data-blocknote-internal-link). We could then use some CSS based on that and add the icon using the ::after marker.

Describe alternatives you've considered

  • Enabling attaching raw DOM attributes to elements
  • Enabling attaching DOM attributes prefixed with e.g. data-blocknote-*
  • Enabling prefixing and suffixing the DOM of the links with additional React elements

All these have quite a bit of drawbacks, so I think the first solution I described above would be a better trade-off.

Additional context
N/A

Bonus
[ ] I'm a sponsor and would appreciate if you could look into this sooner than later 💖

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions