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 StyledText = {
  type: "text";
  /**
   * The text content.
   */
  text: string;
  /**
   * The styles of the text.
   */
  styles: Styles;
};

Link

Link objects represent links to a URL:

type Link = {
  type: "link";
  /**
   * The content of the link.
   */
  content: StyledText[];
  /**
   * The href of the link.
   */
  href: string;
};

Customizing Links

You can customize how links are rendered and how they respond to clicks with the links editor option.

const editor = BlockNoteEditor.create({
  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 = BlockNoteEditor.create({
  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.

Returning false will let BlockNote run other click handlers after this one. Returning true or nothing (the default) marks the event as handled.

const editor = BlockNoteEditor.create({
  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 Styles = {
  /**
   * Whether the text is bold.
   * @default false
   */
  bold: boolean;
  /**
   * Whether the text is italic.
   * @default false
   */
  italic: boolean;
  /**
   * Whether the text is underlined.
   * @default false
   */
  underline: boolean;
  /**
   * Whether the text is struck through.
   * @default false
   */
  strike: boolean;
  /**
   * Whether the text is rendered as inline code.
   * @default false
   */
  code: boolean;
  /**
   * The text color.
   * @default "default"
   */
  textColor: string;
  /**
   * The background color of the text.
   * @default "default"
   */
  backgroundColor: string;
};