Inline Content
By default, InlineContent (the content of text blocks like paragraphs) in BlockNote can either be a StyledText or a Link object.
Here's an overview of all default inline content and the properties they support:
Styled Text
StyledText is a type of InlineContent used to display pieces of text with styles:
type = {
: "text";
/**
* The text content.
*/
: string;
/**
* The styles of the text.
*/
: ;
};Link
Link objects represent links to a URL:
type = {
: "link";
/**
* The content of the link.
*/
: [];
/**
* The href of the link.
*/
: string;
};Customizing Links
You can customize how links are rendered and how they respond to clicks with the links editor option.
const editor = new BlockNoteEditor({
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.
const editor = new BlockNoteEditor({
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.
const editor = new BlockNoteEditor({
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:
type = {
/**
* Whether the text is bold.
* @default false
*/
: boolean;
/**
* Whether the text is italic.
* @default false
*/
: boolean;
/**
* Whether the text is underlined.
* @default false
*/
: boolean;
/**
* Whether the text is struck through.
* @default false
*/
: boolean;
/**
* Whether the text is rendered as inline code.
* @default false
*/
: boolean;
/**
* The text color.
* @default "default"
*/
: string;
/**
* The background color of the text.
* @default "default"
*/
: string;
};