title | imageTitle | path |
---|---|---|
Manipulating Inline Content |
Manipulating Inline Content |
/docs/block-content |
BlockNoteEditor
exposes a number of functions to interact with the currently selected 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)[];
You can insert inline content using the following function:
insertInlineContent(content: PartialInlineContent)
// Usage
editor.insertInlineContent([
"Hello ",
{ type: "text", text: "World", styles: { bold: true } }
]);
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.