feat: Link customization options

docs/content/docs/features/blocks/inline-content.mdx

@@ -79,6 +79,53 @@ type Link = {
 };
 ```
 
+### Customizing Links
+
+You can customize how links are rendered and how they respond to clicks with the `links` editor option.
+
+```ts
+const editor = BlockNoteEditor.create({
+  links: {
+    HTMLAttributes: {
+      class: "my-link-class",
+      target: "_blank",
+    },
+    onClick: (event) => {
+      // Custom click logic, e.g. routing without a page reload.
+    },
+  },
+});
+```
+
+#### `HTMLAttributes`
+
+Additional HTML attributes that should be added to rendered link elements.
+
+```ts
+const editor = BlockNoteEditor.create({
+  links: {
+    HTMLAttributes: {
+      class: "my-link-class",
+      target: "_blank",
+    },
+  },
+});
+```
+
+#### `onClick`
+
+Custom handler invoked when a link is clicked. If left `undefined`, links are opened in a new window on click (the default behavior). If provided, that default behavior is disabled and this function is called instead.
+
+```ts
+const editor = BlockNoteEditor.create({
+  links: {
+    onClick: (event) => {
+      // Do something when a link is clicked.
+    },
+  },
+});
+```
+
 ## Default Styles
 
 The default text formatting options in BlockNote are represented by the `Styles` in the default schema:

packages/core/src/editor/BlockNoteEditor.ts

@@ -140,6 +140,25 @@ export interface BlockNoteEditorOptions<
     NoInfer<SSchema>
   >[];
 
+  /**
+   * Options for configuring how links behave in the editor.
+   */
+  links?: {
+    /**
+     * HTML attributes to add to rendered link elements.
+     *
+     * @default {}
+     * @example { class: "my-link-class", target: "_blank" }
+     */
+    HTMLAttributes?: Record<string, any>;
+    /**
+     * Custom handler invoked when a link is clicked. If left `undefined`,
+     * links are opened in a new window on click. If provided, the default
+     * open-on-click behavior is disabled and this function is called instead.
+     */
+    onClick?: (event: MouseEvent) => void;
+  };
+
   /**
    * @deprecated, provide placeholders via dictionary instead
    * @internal

packages/core/src/editor/managers/ExtensionManager/extensions.ts

@@ -73,7 +73,10 @@ export function getDefaultTiptapExtensions(
     SuggestionAddMark,
     SuggestionDeleteMark,
     SuggestionModificationMark,
-    Link,
+    Link.configure({
+      HTMLAttributes: options.links?.HTMLAttributes ?? {},
+      onClick: options.links?.onClick,
+    }),
     ...(Object.values(editor.schema.styleSpecs).map((styleSpec) => {
       return styleSpec.implementation.mark.configure({
         editor: editor,

packages/core/src/extensions/tiptap-extensions/Link/helpers/clickHandler.ts

@@ -6,6 +6,7 @@ import { Plugin, PluginKey } from "@tiptap/pm/state";
 type ClickHandlerOptions = {
   type: MarkType;
   editor: Editor;
+  onClick?: (event: MouseEvent) => void;
 };
 
 export function clickHandler(options: ClickHandlerOptions): Plugin {
@@ -46,6 +47,11 @@ export function clickHandler(options: ClickHandlerOptions): Plugin {
           return false;
         }
 
+        if (options.onClick) {
+          options.onClick(event);
+          return true;
+        }
+
         const attrs = getAttributes(view.state, options.type.name);
         const href = link.href ?? attrs.href;
         const target = link.target ?? attrs.target;

packages/core/src/extensions/tiptap-extensions/Link/link.ts

@@ -55,10 +55,15 @@ function shouldAutoLink(url: string): boolean {
   return true;
 }
 
+export type LinkOptions = {
+  HTMLAttributes: Record<string, any>;
+  onClick?: (event: MouseEvent) => void;
+};
+
 /**
  * BlockNote Link mark extension.
  */
-export const Link = Mark.create({
+export const Link = Mark.create<LinkOptions>({
   name: "link",
 
   priority: 1000,
@@ -69,6 +74,13 @@ export const Link = Mark.create({
 
   inclusive: false,
 
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      onClick: undefined,
+    };
+  },
+
   addAttributes() {
     return {
       href: {
@@ -156,14 +168,14 @@ export const Link = Mark.create({
         defaultProtocol: DEFAULT_PROTOCOL,
         validate: isAllowedUri,
         shouldAutoLink,
-      })
+      }),
     );
 
     plugins.push(
       clickHandler({
         type: this.type,
         editor: this.editor,
-      })
+      }),
     );
 
     plugins.push(
@@ -172,7 +184,7 @@ export const Link = Mark.create({
         defaultProtocol: DEFAULT_PROTOCOL,
         type: this.type,
         shouldAutoLink,
-      })
+      }),
     );
 
     return plugins;