Manipulating Inline Content

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

Partial Inline Content

When retrieving inline content from the editor, you always receive complete InlineContent objects. For updating or creating inline content, you don't need to pass all properties, and you can use a PartialInlineContent type instead:

type PartialLink = {
  type: "link";
  content: string | StyledText[];
  href: string;
};
 
type PartialInlineContent = string | (string | PartialLink | StyledText)[];

Inserting Inline Content

You can insert inline content using the following function:

insertInlineContent(content: PartialInlineContent)
 
// Usage
editor.insertInlineContent([
  "Hello ",
  { type: "text", text: "World", styles: { bold: true } }
]);

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.