feat: AI block UI

[matthewlipski]

This PR adds all the UX/UI for AI integration in BlockNote according to the Notion doc. The UI is not yet plugged into an API for querying AI models, so it uses a mock function which accepts a string prompt and returns a string AI response.

There are a few differences in the implementation vs the spec listed in the doc:

• The AI inline toolbar now instantly opens after selecting a prompt. This also means there are no AI related loaders outside of the AI inline toolbar. Currently the loader is just an Updating... string but can easily be changed.
• The "Accept", "Retry", and "Revert" buttons shown after an AI response is inserted are an entirely separate toolbar, instead of being part of the formatting toolbar.
  • Inserting content via the AI suggestion menu also shows this separate toolbar.

TODOs:

• [x] AI Block update button text isn't being set to Updating... on click.
• [x] Autofocus not working for prompt input in the AI button popover in the formatting toolbar.
• [ ] Error is thrown when calling mockAIReplaceSelection or mockAIInsertAfterSelection in AIInlineToolbar while React strict mode is enabled. Everything works fine for the user though.
• [x] The AI suggestion menu items are currently derived from dictionary entries, which we probably want to change.
• [ ] AI menu close on escape.
• [ ] AI menu close on backspace.
• [ ] AI menu fade in.
• [ ] AI menu smaller height.
• [ ] AI menu plugin should pass previous block pos when current block is empty. Currently this position change is done in the controller via CSS.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
blocknote	❌ Failed (Inspect)		May 8, 2025 8:13pm
blocknote-website	❌ Failed (Inspect)		May 8, 2025 8:13pm