Manipulating Inline Content

BlockNoteEditor exposes a number of functions to interact with the currently selected content.

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.

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

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

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

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

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

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

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

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

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.

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.