TypeCellOS · YousefED · Aug 1, 2024 · Aug 6, 2024 · Aug 6, 2024 · Aug 6, 2024
diff --git a/.gitignore b/.gitignore
@@ -33,4 +33,6 @@ release
 /test-results/
 /playwright-report/
 /playwright/.cache/
-.nx/
+.env
+*.pem
+.nx/
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -13,5 +13,10 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "[xml]": {
     "editor.defaultFormatter": "redhat.vscode-xml"
+  },
+  "scm.defaultViewMode": "tree",
+  "search.defaultViewMode": "tree",
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }
diff --git a/docs/package.json b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "docs",
-  "version": "0.26.0",
+  "version": "0.30.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

diff --git a/docs/pages/docs/_meta.json b/docs/pages/docs/_meta.json
@@ -8,6 +8,7 @@
   "custom-schemas": "Custom Schemas",
   "collaboration": "Collaboration",
   "advanced": "Advanced",
+  "ai": "AI",
   "discord-link": {
     "title": "Community ↗",
     "href": "https://discord.gg/Qc2QTTH5dF",

diff --git a/docs/pages/docs/ai.mdx b/docs/pages/docs/ai.mdx
@@ -0,0 +1,43 @@
+---
+title: AI Rich Text Editing
+description: Add AI functionality to your BlockNote rich text editor
+imageTitle: BlockNote AI
+path: /docs/ai
+---
+
+import { Example } from "@/components/example";
+import { Callout } from "nextra/components";
+
+# BlockNote AI integration
+
+With BlockNote AI, you can add AI functionality to your rich text editor.
+Users can work with an AI agent to edit, write and format their documents.
+
+[VIDEO]
+
+- Try the [basic AI demo](/examples/ai/minimal)
+- ..or try different models in the [AI playground](/examples/ai/playground)
+- [Setup documentation](/docs/ai/getting-started)
+- TODO
+
+## Features
+
+BlockNote AI has been designed to be fully customizable.
+BlockNote shows exactly what the AI agent is doing - making it easy for users to
+work hand in hand with AI agents.
+
+- Customize commands to write new content or update existing content or formatting
+- Streaming support for quick feedback
+- Users can accept or reject AI suggestions
+- Connect any LLM model (from Llama to OpenAI, Mistral or Anthropic)
+- Customizable prompts
+- Built directly on the [Vercel AI SDK](https://sdk.vercel.ai)
+- No dependency on our backend - use your own infrastructure or connect directly to a hosted LLM API
+- Feature requests? [Get in touch](/about).
+
+<Callout type={"info"}>
+  This feature is provided by the `@blocknote/xl-ai`. `xl-` packages are fully
+  open source, but released under a copyleft license. A commercial license for
+  usage in closed source, proprietary products comes as part of the [Business
+  subscription](/pricing).
+</Callout>
diff --git a/docs/pages/docs/ai/_meta.json b/docs/pages/docs/ai/_meta.json
@@ -0,0 +1,5 @@
+{
+  "setup": "Editor Setup",
+  "custom-commands": "Customizing Commands",
+  "reference": "Reference"
+}
diff --git a/docs/pages/docs/ai/custom-commands.mdx b/docs/pages/docs/ai/custom-commands.mdx
diff --git a/docs/pages/docs/ai/reference.mdx b/docs/pages/docs/ai/reference.mdx
diff --git a/docs/pages/docs/ai/setup.mdx b/docs/pages/docs/ai/setup.mdx
@@ -0,0 +1,106 @@
+---
+title: AI Rich Text Editing
+description: Add AI functionality to your BlockNote rich text editor
+imageTitle: BlockNote AI
+path: /docs/ai
+---
+
+import { Example } from "@/components/example";
+import { Callout } from "nextra/components";
+
+# Getting Started with BlockNote AI
+First, install the `@blocknote/xl-ai` package:
+
+```bash
+npm install @blocknote/xl-ai
+```
+
+## Creating a Model
+
+BlockNote AI uses the the [AI SDK](https://ai-sdk.dev/docs/foundations/overview) to standardize integrating artificial intelligence (AI) models across [supported providers](https://ai-sdk.dev/docs/foundations/providers-and-models).
+
+As a first step, you'll need to register a new model with the AI SDK. For example, for Llama hosted on Groq:
+
+```bash
+npm install @ai-sdk/groq
+```
+
+```ts
+import { createGroq } from "@ai-sdk/groq";
+
+const provider = createGroq({
+  apiKey: "YOUR_GROQ_API_KEY",
+});
+
+const model = provider("llama-3.3-70b-versatile");
+```
+
+<Callout type={"warning"}>
+  Note that this setup directly calls the provider from the client, and exposes
+  your API keys on the client. For Production scenarios, a more common approach is to
+  handle authentication on your own server and proxy requests to a provider. See
+  our [Demo AI
+  Server](https://github.com/TypeCellOS/BlockNote/tree/main/packages/xl-ai-server)
+  for a Node.js example or check the AI SDK best practices.
+</Callout>
+
+## Setting up the editor
+
+Now, you can create the editor with the AI Extension enabled:
+
+```ts
+import { createBlockNoteEditor } from "@blocknote/core";
+import { BlockNoteAIExtension } from "@blocknote/xl-ai";
+import {
+  AIToolbarButton,
+  BlockNoteAIUI,
+  locales as aiLocales,
+  createAIExtension,
+  createBlockNoteAIClient,
+  getAISlashMenuItems,
+} from "@blocknote/xl-ai";
+
+const editor = createBlockNoteEditor({
+    dictionary: {
+      ...en,
+      ai: aiLocales.en, // add default translations for the AI extension
+    },
+    extensions: [
+      createAIExtension({
+        model,
+      }),
+    ],
+    // ... other editor options
+});
+```
+
+### The `createAIExtension` method
+
+TODO
+
+## Adding AI UI elements
+
+Now, the only thing left to do is to customize the UI elements of your editor.
+
+```tsx
+<BlockNoteView
+    editor={editor}
+    // We're disabling some default UI elements
+    formattingToolbar={false}
+    slashMenu={false}>
+    {/* This has AI specific components like the AI Command menu */}
+    <BlockNoteAIUI />
+
+    {/* Create you own Formatting Toolbar with an AI button,
+    (see the full example code below) */}
+    <FormattingToolbarWithAI />
+
+    {/* Create you own SlashMenu with an AI option,
+    (see the full example code below) */}
+    <SuggestionMenuWithAI editor={editor} />
+</BlockNoteView>
+```
+
+# Full Example
+
+<Example name="ai/minimal" />
diff --git a/docs/pages/examples/_meta.json b/docs/pages/examples/_meta.json
@@ -7,5 +7,6 @@
   "interoperability": "Interoperability",
   "custom-schema": "Custom Schemas",
   "collaboration": "Collaboration",
-  "extensions": "Extensions"
+  "extensions": "Extensions",
+  "ai": "AI"
 }
diff --git a/examples/01-basic/01-minimal/package.json b/examples/01-basic/01-minimal/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@blocknote/example-minimal",
+  "name": "@blocknote/example-basic-minimal",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
   "private": true,
   "version": "0.12.4",

diff --git a/examples/01-basic/02-block-objects/package.json b/examples/01-basic/02-block-objects/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@blocknote/example-block-objects",
+  "name": "@blocknote/example-basic-block-objects",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
   "private": true,
   "version": "0.12.4",

diff --git a/examples/01-basic/03-multi-column/package.json b/examples/01-basic/03-multi-column/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@blocknote/example-multi-column",
+  "name": "@blocknote/example-basic-multi-column",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
   "private": true,
   "version": "0.12.4",

diff --git a/examples/01-basic/04-default-blocks/package.json b/examples/01-basic/04-default-blocks/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@blocknote/example-default-blocks",
+  "name": "@blocknote/example-basic-default-blocks",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
   "private": true,
   "version": "0.12.4",

diff --git a/examples/01-basic/05-removing-default-blocks/package.json b/examples/01-basic/05-removing-default-blocks/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@blocknote/example-removing-default-blocks",
+  "name": "@blocknote/example-basic-removing-default-blocks",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
   "private": true,
   "version": "0.12.4",

diff --git a/examples/01-basic/06-block-manipulation/package.json b/examples/01-basic/06-block-manipulation/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@blocknote/example-block-manipulation",
+  "name": "@blocknote/example-basic-block-manipulation",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
   "private": true,
   "version": "0.12.4",

diff --git a/examples/01-basic/07-selection-blocks/package.json b/examples/01-basic/07-selection-blocks/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@blocknote/example-selection-blocks",
+  "name": "@blocknote/example-basic-selection-blocks",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
   "private": true,
   "version": "0.12.4",

diff --git a/examples/01-basic/08-ariakit/package.json b/examples/01-basic/08-ariakit/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@blocknote/example-ariakit",
+  "name": "@blocknote/example-basic-ariakit",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
   "private": true,
   "version": "0.12.4",

diff --git a/examples/01-basic/09-shadcn/package.json b/examples/01-basic/09-shadcn/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@blocknote/example-shadcn",
+  "name": "@blocknote/example-basic-shadcn",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
   "private": true,
   "version": "0.12.4",

diff --git a/examples/01-basic/10-localization/package.json b/examples/01-basic/10-localization/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@blocknote/example-localization",
+  "name": "@blocknote/example-basic-localization",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
   "private": true,
   "version": "0.12.4",

diff --git a/examples/01-basic/11-custom-placeholder/package.json b/examples/01-basic/11-custom-placeholder/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@blocknote/example-custom-placeholder",
+  "name": "@blocknote/example-basic-custom-placeholder",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
   "private": true,
   "version": "0.12.4",

diff --git a/examples/01-basic/12-multi-editor/package.json b/examples/01-basic/12-multi-editor/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@blocknote/example-multi-editor",
+  "name": "@blocknote/example-basic-multi-editor",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
   "private": true,
   "version": "0.12.4",

diff --git a/examples/01-basic/13-custom-paste-handler/package.json b/examples/01-basic/13-custom-paste-handler/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@blocknote/example-custom-paste-handler",
+  "name": "@blocknote/example-basic-custom-paste-handler",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
   "private": true,
   "version": "0.12.4",

diff --git a/examples/01-basic/testing/package.json b/examples/01-basic/testing/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@blocknote/example-testing",
+  "name": "@blocknote/example-basic-testing",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
   "private": true,
   "version": "0.12.4",

diff --git a/examples/02-backend/01-file-uploading/package.json b/examples/02-backend/01-file-uploading/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@blocknote/example-file-uploading",
+  "name": "@blocknote/example-backend-file-uploading",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
   "private": true,
   "version": "0.12.4",

diff --git a/examples/02-backend/02-saving-loading/package.json b/examples/02-backend/02-saving-loading/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@blocknote/example-saving-loading",
+  "name": "@blocknote/example-backend-saving-loading",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
   "private": true,
   "version": "0.12.4",

diff --git a/examples/02-backend/03-s3/package.json b/examples/02-backend/03-s3/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@blocknote/example-s3",
+  "name": "@blocknote/example-backend-s3",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
   "private": true,
   "version": "0.12.4",

diff --git a/examples/02-backend/04-rendering-static-documents/package.json b/examples/02-backend/04-rendering-static-documents/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@blocknote/example-rendering-static-documents",
+  "name": "@blocknote/example-backend-rendering-static-documents",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
   "private": true,
   "version": "0.12.4",

diff --git a/examples/03-ui-components/01-ui-elements-remove/package.json b/examples/03-ui-components/01-ui-elements-remove/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@blocknote/example-ui-elements-remove",
+  "name": "@blocknote/example-ui-components-ui-elements-remove",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
   "private": true,
   "version": "0.12.4",

diff --git a/examples/03-ui-components/02-formatting-toolbar-buttons/BlueButton.tsx b/examples/03-ui-components/02-formatting-toolbar-buttons/BlueButton.tsx
@@ -1,9 +1,9 @@
+import "@blocknote/mantine/style.css";
 import {
   useBlockNoteEditor,
   useComponentsContext,
   useEditorContentOrSelectionChange,
 } from "@blocknote/react";
-import "@blocknote/mantine/style.css";
 import { useState } from "react";
 
 // Custom Formatting Toolbar Button to toggle blue text & background color.

diff --git a/examples/03-ui-components/02-formatting-toolbar-buttons/package.json b/examples/03-ui-components/02-formatting-toolbar-buttons/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@blocknote/example-formatting-toolbar-buttons",
+  "name": "@blocknote/example-ui-components-formatting-toolbar-buttons",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
   "private": true,
   "version": "0.12.4",

diff --git a/examples/03-ui-components/03-formatting-toolbar-block-type-items/package.json b/examples/03-ui-components/03-formatting-toolbar-block-type-items/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@blocknote/example-formatting-toolbar-block-type-items",
+  "name": "@blocknote/example-ui-components-formatting-toolbar-block-type-items",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
   "private": true,
   "version": "0.12.4",

diff --git a/examples/03-ui-components/04-side-menu-buttons/package.json b/examples/03-ui-components/04-side-menu-buttons/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@blocknote/example-side-menu-buttons",
+  "name": "@blocknote/example-ui-components-side-menu-buttons",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
   "private": true,
   "version": "0.12.4",

diff --git a/examples/03-ui-components/05-side-menu-drag-handle-items/package.json b/examples/03-ui-components/05-side-menu-drag-handle-items/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@blocknote/example-side-menu-drag-handle-items",
+  "name": "@blocknote/example-ui-components-side-menu-drag-handle-items",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
   "private": true,
   "version": "0.12.4",

diff --git a/examples/03-ui-components/06-suggestion-menus-slash-menu-items/App.tsx b/examples/03-ui-components/06-suggestion-menus-slash-menu-items/App.tsx
@@ -2,17 +2,16 @@ import {
   BlockNoteEditor,
   filterSuggestionItems,
   insertOrUpdateBlock,
-  PartialBlock,
 } from "@blocknote/core";
 import "@blocknote/core/fonts/inter.css";
+import { BlockNoteView } from "@blocknote/mantine";
+import "@blocknote/mantine/style.css";
 import {
   DefaultReactSuggestionItem,
   getDefaultReactSlashMenuItems,
   SuggestionMenuController,
   useCreateBlockNote,
 } from "@blocknote/react";
-import { BlockNoteView } from "@blocknote/mantine";
-import "@blocknote/mantine/style.css";
 import { HiOutlineGlobeAlt } from "react-icons/hi";
 
 // Custom Slash Menu item to insert a block after the current one.