Manipulating Inline Content

While InlineContent objects are used to describe a block's content, they can be cumbersome to work with directly. Therefore, BlockNote exposes functions which make it easier to edit block contents.

Accessing Styles

You can get the styles at the current Text Cursor Position using the following function:

getActiveStyles(): Styles;
 
// Usage
const styles = editor.getActiveStyles();

If a Selection is active, this function returns the active styles at the end of the selection.

Adding Styles

You can add styles to the currently selected text using the following function:

addStyles(styles: Styles): void;
 
// Usage
editor.addStyles({ textColor: "red" });

Removing Styles

You can remove styles from the currently selected text using the following function:

removeStyles(styles: Styles): void;
 
// Usage
editor.removeStyles({ bold: true });

Toggling Styles

You can toggle styles on the currently selected text using the following function:

toggleStyles(styles: Styles): void;
 
// Usage
editor.toggleStyles({ bold: true, italic: true });

Accessing Selected Text

You can get the currently selected text using the following function:

getSelectedText(): string;
 
// Usage
const text = editor.getSelectedText();

Accessing Selected Link

You can get the URL of the link in the current selection the following function:

getSelectedLink(): string | undefined;
 
// Usage
const linkUrl = editor.getSelectedLink();

If there are multiple links in the selection, this function only returns the last one's URL. If there are no links, returns undefined.

Creating a Link

You can create a new link using the following function:

createLink(url: string, text?: string): void;
 
// Usage
editor.createLink("https://www.blocknotejs.org/", "BlockNote");

If a Selection is active, the new link will replace the currently selected content.