### Install Dependencies and Start Project

Source: https://github.com/typecellos/blocknote/blob/main/CONTRIBUTING.md

Commands to install all necessary npm modules and start the example project. Ensure you are in the project's root directory.

```bash
pnpm install
```

```bash
pnpm start
```

--------------------------------

### Setup Environment Variables

Source: https://github.com/typecellos/blocknote/blob/main/docs/README.md

Copy the example environment file to '.env.local' to configure local development settings.

```bash
cp .env.example .env.local
```

--------------------------------

### Install BlockNote with ShadCN (bun)

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/getting-started/shadcn.mdx

Install the core, React, and ShadCN packages for BlockNote using bun.

```bash
bun add @blocknote/core @blocknote/react @blocknote/shadcn
```

--------------------------------

### Install PDF Exporter Packages

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/features/export/pdf.mdx

Install the necessary packages for PDF export and rendering.

```bash
npm install @blocknote/xl-pdf-exporter @react-pdf/renderer
```

--------------------------------

### Install BlockNote and Mantine Packages (bun)

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/getting-started/mantine.mdx

Install the necessary BlockNote and Mantine packages using bun.

```bash
bun add @blocknote/core @blocknote/react @blocknote/mantine
npm install @mantine/core @mantine/hooks @mantine/utils
```

--------------------------------

### Install Email Exporter Package

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/features/export/email.mdx

Install the `@blocknote/xl-email-exporter` package using npm.

```bash
npm install @blocknote/xl-email-exporter
```

--------------------------------

### Install BlockNote with ShadCN (pnpm)

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/getting-started/shadcn.mdx

Install the core, React, and ShadCN packages for BlockNote using pnpm.

```bash
pnpm add @blocknote/core @blocknote/react @blocknote/shadcn
```

--------------------------------

### Install BlockNote with ShadCN (npm)

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/getting-started/shadcn.mdx

Install the core, React, and ShadCN packages for BlockNote using npm.

```bash
npm install @blocknote/core @blocknote/react @blocknote/shadcn
```

--------------------------------

### Start Development Server

Source: https://github.com/typecellos/blocknote/blob/main/docs/README.md

Execute this command from within the './docs' directory to launch the development server on port 3000.

```bash
pnpm run dev
```

--------------------------------

### Example File Upload Implementation

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/react/components/image-toolbar.mdx

This example demonstrates how to implement a file upload function, which is necessary for the File Panel to work. It's recommended to use your own backend for production environments.

```typescript
<Example name="backend/file-uploading" />
```

--------------------------------

### Install BlockNote Core with NPM

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/getting-started/vanilla-js.mdx

Install the core BlockNote package for vanilla JS usage via NPM.

```bash
npm install @blocknote/core
```

--------------------------------

### Install BlockNote and Mantine Packages (npm)

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/getting-started/mantine.mdx

Install the necessary BlockNote and Mantine packages using npm.

```bash
npm install @blocknote/core @blocknote/react @blocknote/mantine
npm install @mantine/core @mantine/hooks @mantine/utils
```

--------------------------------

### Minimal BlockNote Editor Setup

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/index.mdx

This snippet shows the basic setup for a minimal BlockNote editor in React. It requires importing the necessary components and initializing the editor.

```jsx
import { BlockNoteView } from "@blocknote/react";

function Editor() {
  return <BlockNoteView editor={editor} />; 
}
```

--------------------------------

### Install ODT Exporter Package

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/features/export/odt.mdx

Install the necessary package for ODT export functionality.

```bash
npm install @blocknote/xl-odt-exporter
```

--------------------------------

### Install BlockNote with Ariakit using bun

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/getting-started/ariakit.mdx

Install the necessary BlockNote packages for React and Ariakit integration using bun.

```bash
bun add @blocknote/core @blocknote/react @blocknote/ariakit
```

--------------------------------

### Install DOCX Exporter Packages

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/features/export/docx.mdx

Install the necessary packages for DOCX export. This includes the exporter itself and the core `docx` library.

```bash
npm install @blocknote/xl-docx-exporter docx
```

--------------------------------

### Install BlockNote AI Package

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/features/ai/getting-started.mdx

Install the necessary package for BlockNote AI functionality using npm.

```bash
npm install @blocknote/xl-ai
```

--------------------------------

### Install BlockNote and Mantine Packages (pnpm)

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/getting-started/mantine.mdx

Install the necessary BlockNote and Mantine packages using pnpm.

```bash
pnpm add @blocknote/core @blocknote/react @blocknote/mantine
npm install @mantine/core @mantine/hooks @mantine/utils
```

--------------------------------

### Programmatic Theme Configuration with BlockNoteView

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/react/styling-theming/themes.mdx

Example demonstrating how to configure BlockNote's theme programmatically using the `theme` prop in `BlockNoteView`. This allows for dynamic styling of the editor.

```typescript
<BlockNoteView theme={redTheme} />
```

--------------------------------

### Vitest Browser Setup Script

Source: https://github.com/typecellos/blocknote/blob/main/e2e-vitest-browser-migration.md

The setup script for Vitest Browser Mode, responsible for seeding test options into the window object.

```typescript
tests/vitestSetup.browser.ts
```

--------------------------------

### Install BlockNote with Ariakit using npm

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/getting-started/ariakit.mdx

Install the necessary BlockNote packages for React and Ariakit integration using npm.

```bash
npm install @blocknote/core @blocknote/react @blocknote/ariakit
```

--------------------------------

### Install BlockNote with Ariakit using pnpm

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/getting-started/ariakit.mdx

Install the necessary BlockNote packages for React and Ariakit integration using pnpm.

```bash
pnpm add @blocknote/core @blocknote/react @blocknote/ariakit
```

--------------------------------

### Initialize BlockNote Editor with React

Source: https://github.com/typecellos/blocknote/blob/main/README.md

Basic setup for using the BlockNote editor in a React application. Requires importing core and Mantine styles.

```typescript
import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/core/fonts/inter.css";
import "@blocknote/mantine/style.css";

function App() {
  const editor = useCreateBlockNote();

  return <BlockNoteView editor={editor} />;
}
```

--------------------------------

### Configure Email Sending Environment Variables (Protonmail)

Source: https://github.com/typecellos/blocknote/blob/main/docs/README.md

Example configuration for sending emails using Protonmail SMTP, requiring an SMTP submission token.

```bash
SMTP_HOST=smtp.protonmail.com
SMTP_USER=my.email@protonmail.com
SMTP_PASS=my-smtp-token
SMTP_PORT=587
SMTP_SECURE=false
```

--------------------------------

### Custom Paste Handler Example

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/reference/editor/paste-handling.mdx

Provides an example of a custom paste handler that checks for a specific MIME type ('text/my-custom-format') and pastes it as Markdown if found. Otherwise, it falls back to the default paste handler.

```typescript
const editor = new BlockNoteEditor({
  pasteHandler: ({ event, editor, defaultPasteHandler }) => {
    if (event.clipboardData?.types.includes("text/my-custom-format")) {
      // You can do any custom logic here, for example you could transform the clipboard data before pasting it
      const markdown = customToMarkdown(
        event.clipboardData.getData("text/my-custom-format"),
      );

      // The editor is able paste markdown (`pasteMarkdown`), HTML (`pasteHTML`), or plain text (`pasteText`)
      editor.pasteMarkdown(markdown);
      // We handled the paste event, so return true, returning false will cancel the paste event
      return true;
    }

    // If we didn't handle the paste event, call the default paste handler to do the default behavior
    return defaultPasteHandler();
  },
});
```

--------------------------------

### Default Backend Setup with Vercel AI SDK

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/features/ai/backend-integration.mdx

This Next.js API route handles POST requests, processing messages and tool definitions to stream AI responses. It injects document state and converts BlockNote tools for the LLM.

```typescript
import {
  openai
} from "@ai-sdk/openai";
import { convertToModelMessages, streamText } from "ai";
import {
  aiDocumentFormats,
  injectDocumentStateMessages,
  toolDefinitionsToToolSet,
} from "@blocknote/xl-ai/server";

// Allow streaming responses up to 30 seconds
export const maxDuration = 30;

export async function POST(req: Request) {
  const { messages, toolDefinitions } = await req.json();

  const result = streamText({
    model: openai("gpt-4.1"), // see https://ai-sdk.dev/docs/foundations/providers-and-models
    system: aiDocumentFormats.html.systemPrompt,
    messages: await convertToModelMessages(
      injectDocumentStateMessages(messages),
    ),
    tools: toolDefinitionsToToolSet(toolDefinitions),
    toolChoice: "required",
  });

  return result.toUIMessageStreamResponse();
}
```

--------------------------------

### Client-Side LLM Integration with ClientSideTransport

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/features/ai/backend-integration.mdx

This example demonstrates integrating BlockNote AI directly with an LLM on the client-side using ClientSideTransport. It requires setting up an AI SDK Provider and LanguageModel.

```typescript
import { createOpenAICompatible } from "@ai-sdk/openai-compatible";
import { ClientSideTransport } from "@blocknote/xl-ai";

const model = createOpenAICompatible({
  apiKey: 'your-api-key',
  baseURL: 'https://your-provider',
})('model-id');

// ...
 AIExtension({
    transport: new ClientSideTransport({
        model,
    }),
}),
// ...
```

--------------------------------

### Vitest Browser Test Setup

Source: https://github.com/typecellos/blocknote/blob/main/e2e-vitest-browser-migration.md

Replace Playwright imports with Vitest browser equivalents. This includes test, expect, beforeEach, vi, userEvent, page, server, and render from vitest-browser-react.

```typescript
import { test, expect, beforeEach, vi } from "vite-plus/test"
import { userEvent, page, server } from "vite-plus/test/browser/context"
import { render } from "vitest-browser-react"
import App from "./App"

```

--------------------------------

### Quick Start BlockNote Editor in React

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/react/overview.mdx

Integrates BlockNote into a React component using `useCreateBlockNote` and `BlockNoteView`. This provides a fully functional editor with text formatting, block types, and a toolbar.

```tsx
import React from "react";
import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";
// Or, you can use ariakit, shadcn, etc.

function MyEditor() {
  const editor = useCreateBlockNote();

  return <BlockNoteView editor={editor} />;
}
```

--------------------------------

### Initialize Database

Source: https://github.com/typecellos/blocknote/blob/main/docs/README.md

Run this command in the 'docs' directory to initialize the SQLite database.

```bash
cd docs && pnpm run init-db
```

--------------------------------

### Initialize BlockNote Editor with AI Extension

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/features/ai/getting-started.mdx

Set up the BlockNote editor with the AI Extension enabled, including default translations and a chat transport.

```typescript
import { createBlockNoteEditor } from "@blocknote/core";
import { BlockNoteAIExtension } from "@blocknote/xl-ai";
import { en } from "@blocknote/core/locales";
import { en as aiEn } from "@blocknote/xl-ai/locales";
import { AIExtension } from "@blocknote/xl-ai";
import "@blocknote/xl-ai/style.css"; // add the AI stylesheet

const editor = createBlockNoteEditor({
  dictionary: {
    ...en,
    ai: aiEn, // add default translations for the AI extension
  },
  extensions: [
    AIExtension({
      transport: new DefaultChatTransport({
        api: `/api/chat`,
      }),
    }),
  ],
  // ... other editor options
});
```

--------------------------------

### Create Schema from Scratch

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/features/custom-schemas/index.mdx

Create a new schema from scratch by passing custom blocks, inline content, or styles directly to `BlockNoteSchema.create`. This is ideal when you only need a minimal set of default features.

```typescript
const schema = BlockNoteSchema.create({
  blockSpecs: {
    paragraph: defaultBlockSpecs.paragraph,
    customBlock: CustomBlock,
    ...
  },
  inlineContentSpecs: {
    text: defaultInlineContentSpecs.text,
    customInlineContent: CustomInlineContent,
    ...
  },
  styleSpecs: {
    bold: defaultStyleSpecs.bold,
    customStyle: CustomStyle,
    ...
  },
});

```

--------------------------------

### Run E2E Tests from Root

Source: https://github.com/typecellos/blocknote/blob/main/e2e-vitest-browser-migration.md

Command to run end-to-end tests from the repository root, including building the project first.

```bash
e2e
```

--------------------------------

### Create a BlockNote Editor Instance

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/getting-started/vanilla-js.mdx

Instantiate a BlockNote editor and mount it to a DOM element. This creates a basic editor without any UI elements.

```typescript
import { BlockNoteEditor } from "@blocknote/core";

const editor = BlockNoteEditor.create();

editor.mount(document.getElementById("root")); // element to append the editor to
```

--------------------------------

### Custom Mention Inline Content Example

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/features/custom-schemas/custom-inline-content.mdx

An example of creating a custom 'mention' inline content type. It specifies the type, prop schema for user data, and sets content to 'none' as it's a non-editable element.

```typescript
const Mention = createReactInlineContentSpec(
  {
    type: "mention",
    propSchema: {
      user: {
        default: "Unknown",
      },
    },
    content: "none",
  } as const,
  {
    render: (props) => (
      ...
    ),
  }
);
```

--------------------------------

### Getting Selected Text

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/reference/editor/manipulating-content.mdx

Retrieves the currently selected text as a plain string.

```APIDOC
## getSelectedText

### Description
Retrieves the currently selected text as a plain string.

### Signature
```typescript
getSelectedText(): string
```

### Examples
```typescript
const selectedText = editor.getSelectedText();
console.log("Selected text:", selectedText);

// Example: Copy selected text to clipboard
if (selectedText) {
  navigator.clipboard.writeText(selectedText);
}
```
```

--------------------------------

### Expose Local Server with ngrok

Source: https://github.com/typecellos/blocknote/blob/main/docs/README.md

Use ngrok to expose your local development server to the internet for testing webhooks.

```bash
ngrok http http://localhost:3000
```

--------------------------------

### Getting Active Styles

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/reference/editor/manipulating-content.mdx

Returns the active text styles at the current cursor position or at the end of the current selection.

```APIDOC
## getActiveStyles

### Description
Returns the active text styles at the current cursor position or at the end of the current selection.

### Signature
```typescript
getActiveStyles(): Styles
```

### Examples
```typescript
const activeStyles = editor.getActiveStyles();
console.log("Active styles:", activeStyles);

// Example: Check if text is bold
if (activeStyles.bold) {
  console.log("Text is bold");
}

// Example: Get text color
if (activeStyles.textColor) {
  console.log("Text color:", activeStyles.textColor);
}
```
```

--------------------------------

### BlockNote: Get Specific Blocks

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/reference/editor/manipulating-content.mdx

Provides functions to retrieve a specific block by its identifier, or its preceding/succeeding or parent block.

```typescript
// Single block
getBlock(blockIdentifier: BlockIdentifier): Block | undefined

// Previous block
getPrevBlock(blockIdentifier: BlockIdentifier): Block | undefined

// Next block
getNextBlock(blockIdentifier: BlockIdentifier): Block | undefined

// Parent block
getParentBlock(blockIdentifier: BlockIdentifier): Block | undefined
```

```typescript
const block = editor.getBlock("block-123");
const prevBlock = editor.getPrevBlock("block-123");
const nextBlock = editor.getNextBlock("block-123");
const parentBlock = editor.getParentBlock("nested-block-123");
```

--------------------------------

### BlockNote: Get All Top-Level Blocks

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/reference/editor/manipulating-content.mdx

Retrieves a snapshot of all top-level blocks currently present in the BlockNote editor document.

```typescript
const blocks = editor.document;
```

--------------------------------

### Round-trip Conversion Example

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/reference/editor/yjs-utilities.mdx

Demonstrates a round-trip conversion from BlockNote blocks to a Y.Doc and back to blocks, ensuring content integrity.

```APIDOC
## Round-trip Conversion

All conversion functions support round-trip conversion, meaning you can convert blocks → YJS → blocks and get back the same content:

```typescript
import { BlockNoteEditor } from "@blocknote/core";
import { blocksToYDoc, yDocToBlocks } from "@blocknote/core/yjs";

const editor = BlockNoteEditor.create();

const originalBlocks = [
  {
    type: "paragraph",
    content: "Test content",
  },
];

// Convert to Y.Doc and back
const ydoc = blocksToYDoc(editor, originalBlocks);
const convertedBlocks = yDocToBlocks(editor, ydoc);

// originalBlocks and convertedBlocks are equivalent
console.log(originalBlocks); // Same structure as convertedBlocks
```
```

--------------------------------

### Configure Logging In Environment Variables

Source: https://github.com/typecellos/blocknote/blob/main/docs/README.md

Set these environment variables to test user authentication, including optional GitHub OAuth.

```bash
AUTH_SECRET=test
# Github OAuth optionally
AUTH_GITHUB_ID=test
AUTH_GITHUB_SECRET=test
```

--------------------------------

### Define and Create a Custom Block with Options

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/features/custom-schemas/custom-blocks.mdx

Define arbitrary options for a custom block and use them when creating the block instance. This allows for dynamic configurations like syntax highlighting languages or heading levels.

```typescript
type CustomBlockConfigOptions = {
  ...
}

const createCustomBlock = createReactBlockSpec(
  createBlockConfig((options: CustomBlockConfigOptions) => ({
    type: "customBlock"
    propSchema: ...,
    content: ...,
  })),
  (options: CustomBlockConfigOptions) => ({
    render: ...,
    ...
  })
)

const options: CustomBlockConfigOptions = {
  ...
};

const schema = BlockNoteSchema.create().extend({
  blockSpecs: {
    customBlock: createCustomBlock(options),
  },
});
```

--------------------------------

### Numbered List Item Type Definition

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/features/blocks/list-types.mdx

Defines the structure for a numbered list item block. Supports a 'start' prop for custom numbering.

```typescript
type NumberedListItemBlock = {
  id: string;
  type: "numberedListItem";
  props: DefaultProps & {
    start?: number;
  };
  content: InlineContent[];
  children: Block[];
};
```

--------------------------------

### Getting Selected Link URL

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/reference/editor/manipulating-content.mdx

Retrieves the URL of the last link within the current text selection. Returns `undefined` if no link is selected.

```APIDOC
## getSelectedLinkUrl

### Description
Returns the URL of the last link in the current selection, or `undefined` if no links are selected.

### Method Signature
```typescript
getSelectedLinkUrl(): string | undefined
```

### Usage Example
```typescript
const linkUrl = editor.getSelectedLinkUrl();

if (linkUrl) {
  console.log("Selected link URL:", linkUrl);
  // Open link in new tab
  window.open(linkUrl, "_blank");
} else {
  console.log("No link selected");
}
```
```

--------------------------------

### Get Selected Link URL

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/reference/editor/manipulating-content.mdx

Retrieves the URL of the last link within the current text selection. Returns undefined if no link is selected.

```typescript
const linkUrl = editor.getSelectedLinkUrl();

if (linkUrl) {
  console.log("Selected link URL:", linkUrl);
  // Open link in new tab
  window.open(linkUrl, "_blank");
} else {
  console.log("No link selected");
}
```

--------------------------------

### Run E2E Tests and Update Snapshots

Source: https://github.com/typecellos/blocknote/blob/main/e2e-vitest-browser-migration.md

Command to run end-to-end tests and update snapshots. Recommended to run in Docker for consistency.

```bash
cd tests && pnpm test:e2e
```

--------------------------------

### Convert BlockNote to HTML on Server

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/features/server-processing.mdx

Use `ServerBlockNoteEditor.create()` to initialize an editor for server-side HTML conversion. Pass BlockNoteEditorOptions for custom configurations.

```tsx
import { ServerBlockNoteEditor } from "@blocknote/server-util";

const editor = ServerBlockNoteEditor.create();
const html = await editor.blocksToFullHTML(blocks);
```

--------------------------------

### YjsThreadStore Initialization

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/features/collaboration/comments.mdx

Initializes the YjsThreadStore for direct Yjs-based comment storage. Suitable for simple collaborative setups where users have write access to the Yjs document.

```tsx
import { YjsThreadStore } from "@blocknote/core/yjs";

const threadStore = new YjsThreadStore(
  userId, // The active user's ID
  yDoc.getMap("threads"), // Y.Map to store threads
  new DefaultThreadStoreAuth(userId, "editor"), // Authorization information, see below
);
```

--------------------------------

### Customize BlockNote Text Strings

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/features/localization.mdx

Customize specific text strings by extending an existing dictionary. This example overrides placeholder and slash menu item text.

```tsx
import { useCreateBlockNote, BlockNoteView } from "@blocknote/react";
import { en } from "@blocknote/core/locales";

function CustomEditor() {
  const editor = useCreateBlockNote({
    dictionary: {
      ...en,
      placeholders: {
        ...en.placeholders,
        default: "Start typing your story...",
        heading: "Enter your title here",
        emptyDocument: "Begin your document",
      },
      slash_menu: {
        ...en.slash_menu,
        paragraph: {
          ...en.slash_menu.paragraph,
          title: "Text Block",
          subtext: "Regular text content",
        },
      },
    },
  });

  return <BlockNoteView editor={editor} />;
}
```

--------------------------------

### AIExtension Configuration

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/features/ai/reference.mdx

Configuration options for creating a new AI Extension to be registered with `useCreateBlockNote`.

```APIDOC
## `AIExtension`

Use `AIExtension` to create a new AI Extension that can be registered to an editor when calling `useCreateBlockNote`.

```typescript
// Usage:
useCreateBlockNote({
  // Register the AI extension
  extensions: [AIExtension(options)],
  // other editor options
});

type AIExtensionOptions = AIRequestHelpers & {
  /**
   * The name and color of the agent cursor when the AI is writing
   * @default { name: "AI", color: "#8bc6ff" }
   */
  agentCursor?: { name: string; color: string };
};

type AIRequestHelpers = {
  /**
   * Transport used by the AI SDK to send requests to your backend/LLM.
   * Implement to customize backend URLs or use a different transport (e.g. websockets).
   */
  transport?: ChatTransport<UIMessage>;

  /**
   * Use the ChatProvider to customize how the AI SDK Chat instance is created.
   * For example, when you want to reuse an existing Chat instance used in the rest of your application.
   *
   * @note you cannot use both `chatProvider` and `transport` together.
   */
  chatProvider?: () => Chat<UIMessage>;

  /**
   * Customize which stream tools are available to the LLM.
   */
  streamToolsProvider?: StreamToolsProvider<any, any>;
  // Provide `streamToolsProvider` in AIExtension(options) or override per call via InvokeAIOptions.
  // If omitted, defaults to using `aiDocumentFormats.html.getStreamToolsProvider()`.

  /**
   * Extra options (headers/body/metadata) forwarded to the AI SDK request.
   */
  chatRequestOptions?: ChatRequestOptions;

  /**
   * Build the serializable document state that will be forwarded to the backend.
   *
   * @default aiDocumentFormats.html.defaultDocumentStateBuilder
   */
  documentStateBuilder?: DocumentStateBuilder<any>;
};
```
```

--------------------------------

### Get Selected Text

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/reference/editor/manipulating-content.mdx

Use `getSelectedText` to retrieve the currently selected text as a plain string. This can be useful for operations like copying or processing user input.

```typescript
const selectedText = editor.getSelectedText();
console.log("Selected text:", selectedText);

// Example: Copy selected text to clipboard
if (selectedText) {
  navigator.clipboard.writeText(selectedText);
}
```

--------------------------------

### Generate Shiki Highlighter Bundle

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/features/blocks/code-blocks.mdx

Command to generate a Shiki highlighter bundle using `shiki-codegen` for specified languages and themes, optimized with the javascript engine.

```bash
npx shiki-codegen --langs javascript,typescript,vue --themes light-plus,dark-plus --engine javascript --precompiled ./shiki.bundle.ts
```

--------------------------------

### Slash Menu Item Grouping Example

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/react/components/suggestion-menus.mdx

Illustrates how adjacent items with the same `group` attribute are rendered together. If separated by items with different groups, they form distinct groups.

```typescript
// Renders as a single "Basic" group:
[
  { title: "Item A", group: "Basic", /* ... */ },
  { title: "Item B", group: "Basic", /* ... */ },
  { title: "Item C", group: "Other", /* ... */ },
]

// Renders as two separate "Basic" groups, with "Other" between them:
[
  { title: "Item A", group: "Basic", /* ... */ },
  { title: "Item C", group: "Other", /* ... */ },
  { title: "Item B", group: "Basic", /* ... */ },
]
```

--------------------------------

### Configure Email Sending Environment Variables (Basic)

Source: https://github.com/typecellos/blocknote/blob/main/docs/README.md

These variables can be set to test email sending. If not configured, emails will be logged to the console.

```bash
SMTP_HOST=
SMTP_USER=
SMTP_PASS=
SMTP_PORT=
SMTP_SECURE=false
```

--------------------------------

### Get Current Selection

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/reference/editor/cursor-selections.mdx

Retrieves the current selection in the editor, which spans multiple blocks. Returns `undefined` if no selection is active. Use this to check for active selections and their extent.

```typescript
getSelection(): Selection | undefined;

// Usage
const selection = editor.getSelection();
if (selection) {
  console.log("Selected blocks:", selection.blocks.length);
}
```

--------------------------------

### Configure Payments Environment Variables

Source: https://github.com/typecellos/blocknote/blob/main/docs/README.md

Set these environment variables to test payment functionality using the Polar sandbox.

```bash
POLAR_ACCESS_TOKEN=test
POLAR_WEBHOOK_SECRET=test
```

--------------------------------

### Get Text Cursor Position

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/reference/editor/cursor-selections.mdx

Retrieves the current position of the text cursor, including the block it's in and its surrounding blocks. Use this to understand the cursor's context.

```typescript
getTextCursorPosition(): TextCursorPosition;

// Usage
const cursorPos = editor.getTextCursorPosition();
console.log("Cursor is in block:", cursorPos.block.id);
```

--------------------------------

### Run All Tests (JSOM and Browser)

Source: https://github.com/typecellos/blocknote/blob/main/e2e-vitest-browser-migration.md

Execute both the jsdom unit tests and the browser end-to-end tests from the repository root. Ensures all test suites pass.

```bash
vp test
```

--------------------------------

### Manage Cursor and Selections in BlockNote

Source: https://github.com/typecellos/blocknote/blob/main/docs/content/docs/foundations/manipulating-content.mdx

Get cursor position information, set the cursor to a specific block, retrieve the current selection, or programmatically set a selection range.

```typescript
// Get cursor position information
const cursorPosition = editor.getTextCursorPosition();

// Set cursor to a specific block
editor.setTextCursorPosition(blockId, "start");

// Get current selection
const selection = editor.getSelection();

// Set selection programmatically
editor.setSelection(startBlockId, endBlockId);
```

--------------------------------

### Mounting React App in Vitest

Source: https://github.com/typecellos/blocknote/blob/main/e2e-vitest-browser-migration.md

Renders a React component directly within a Vitest test environment using `vitest-browser-react`. Ensure `vitest-browser-react` is installed and compatible with your Vitest version.

```tsx
import { render } from "vitest-browser-react";
import App from "../../../../examples/01-basic/testing/src/App.js";

beforeEach(() => {
  render(<App />);
});
```