feat: AI block UI

.gitignore

@@ -33,3 +33,5 @@ release
 /test-results/
 /playwright-report/
 /playwright/.cache/
+.env
+*.pem

.todo.txt

@@ -0,0 +1,7 @@
+
+review toolbar code
+fix design of menus (smaller items, border?)
+
+see if addToHistory: false is needed
+track last affected position to update toolbar
+enable / disable show selection plugin

docs/pages/examples/_meta.json

@@ -7,5 +7,6 @@
   "interoperability": "Interoperability",
   "custom-schema": "Custom Schemas",
   "collaboration": "Collaboration",
-  "extensions": "Extensions"
+  "extensions": "Extensions",
+  "ai": "AI"
 }

examples/01-basic/01-minimal/.bnexample.json

@@ -2,5 +2,8 @@
   "playground": true,
   "docs": true,
   "author": "matthewlipski",
-  "tags": ["Basic"]
+  "tags": ["Basic"],
+  "dependencies": {
+    "@blocknote/xl-ai": "latest"
+  }
 }

examples/01-basic/01-minimal/App.tsx

@@ -1,12 +1,95 @@
+import {
+  AIBlock,
+  AIBlockToolbarProsemirrorPlugin,
+  AIButton,
+  AIShowSelectionPlugin,
+  BlockNoteAIContextProvider,
+  BlockNoteAIUI,
+  aiBlockTypeSelectItems,
+  locales as aiLocales,
+  getAISlashMenuItems,
+  useBlockNoteAIContext,
+} from "@blocknote/xl-ai";
+
+import {
+  BlockNoteEditor,
+  BlockNoteSchema,
+  defaultBlockSpecs,
+  filterSuggestionItems,
+  locales,
+} from "@blocknote/core";
 import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
-import { useCreateBlockNote } from "@blocknote/react";
+import {
+  FormattingToolbar,
+  FormattingToolbarController,
+  SuggestionMenuController,
+  blockTypeSelectItems,
+  getDefaultReactSlashMenuItems,
+  getFormattingToolbarItems,
+  useCreateBlockNote,
+} from "@blocknote/react";
+import "@blocknote/xl-ai/style.css";
 
+const schema = BlockNoteSchema.create({
+  blockSpecs: {
+    ...defaultBlockSpecs,
+    ai: AIBlock,
+  },
+});
 export default function App() {
   // Creates a new editor instance.
-  const editor = useCreateBlockNote();
+  const editor = useCreateBlockNote({
+    schema,
+    dictionary: {
+      ...locales.en,
+      ai: aiLocales.en,
+    } as any,
+    _extensions: {
+      // TODO: things will break when user provides different keys. Define name on plugins instead?
+      aiBlockToolbar: new AIBlockToolbarProsemirrorPlugin(),
+      aiSelection: new AIShowSelectionPlugin(),
+    },
+  });
 
   // Renders the editor instance using a React component.
-  return <BlockNoteView editor={editor} />;
+  return (
+    <BlockNoteView editor={editor} formattingToolbar={false} slashMenu={false}>
+      <BlockNoteAIContextProvider>
+        <BlockNoteAIUI />
+        <FormattingToolbarController
+          formattingToolbar={() => (
+            <FormattingToolbar>
+              {...getFormattingToolbarItems([
+                ...blockTypeSelectItems(editor.dictionary),
+                ...aiBlockTypeSelectItems(aiLocales.en),
+              ])}
+              <AIButton />
+            </FormattingToolbar>
+          )}
+        />
+        <SuggestionMenu editor={editor} />
+      </BlockNoteAIContextProvider>
+      {/* TODO: Side Menu customization */}
+    </BlockNoteView>
+  );
+}
+
+function SuggestionMenu(props: { editor: BlockNoteEditor<any, any, any> }) {
+  const ctx = useBlockNoteAIContext();
+  return (
+    <SuggestionMenuController
+      triggerCharacter="/"
+      getItems={async (query) =>
+        filterSuggestionItems(
+          [
+            ...getDefaultReactSlashMenuItems(props.editor),
+            ...getAISlashMenuItems(props.editor as any, ctx), // TODO
+          ],
+          query
+        )
+      }
+    />
+  );
 }

examples/01-basic/01-minimal/package.json

@@ -17,7 +17,8 @@
     "@blocknote/mantine": "latest",
     "@blocknote/shadcn": "latest",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "@blocknote/xl-ai": "latest"
   },
   "devDependencies": {
     "@types/react": "^18.0.25",

examples/01-basic/01-minimal/vite.config.ts

@@ -14,18 +14,18 @@ export default defineConfig((conf) => ({
   resolve: {
     alias:
       conf.command === "build" ||
-      !fs.existsSync(path.resolve(__dirname, "../../packages/core/src"))
+      !fs.existsSync(path.resolve(__dirname, "../../../packages/core/src"))
         ? {}
         : ({
             // Comment out the lines below to load a built version of blocknote
             // or, keep as is to load live from sources with live reload working
             "@blocknote/core": path.resolve(
               __dirname,
-              "../../packages/core/src/"
+              "../../../packages/core/src/"
             ),
             "@blocknote/react": path.resolve(
               __dirname,
-              "../../packages/react/src/"
+              "../../../packages/react/src/"
             ),
           } as any),
   },

examples/01-basic/02-block-objects/vite.config.ts

@@ -14,18 +14,18 @@ export default defineConfig((conf) => ({
   resolve: {
     alias:
       conf.command === "build" ||
-      !fs.existsSync(path.resolve(__dirname, "../../packages/core/src"))
+      !fs.existsSync(path.resolve(__dirname, "../../../packages/core/src"))
         ? {}
         : ({
             // Comment out the lines below to load a built version of blocknote
             // or, keep as is to load live from sources with live reload working
             "@blocknote/core": path.resolve(
               __dirname,
-              "../../packages/core/src/"
+              "../../../packages/core/src/"
             ),
             "@blocknote/react": path.resolve(
               __dirname,
-              "../../packages/react/src/"
+              "../../../packages/react/src/"
             ),
           } as any),
   },

examples/01-basic/03-multi-column/vite.config.ts

@@ -14,18 +14,18 @@ export default defineConfig((conf) => ({
   resolve: {
     alias:
       conf.command === "build" ||
-      !fs.existsSync(path.resolve(__dirname, "../../packages/core/src"))
+      !fs.existsSync(path.resolve(__dirname, "../../../packages/core/src"))
         ? {}
         : ({
             // Comment out the lines below to load a built version of blocknote
             // or, keep as is to load live from sources with live reload working
             "@blocknote/core": path.resolve(
               __dirname,
-              "../../packages/core/src/"
+              "../../../packages/core/src/"
             ),
             "@blocknote/react": path.resolve(
               __dirname,
-              "../../packages/react/src/"
+              "../../../packages/react/src/"
             ),
           } as any),
   },

examples/01-basic/04-all-blocks/vite.config.ts

@@ -14,18 +14,18 @@ export default defineConfig((conf) => ({
   resolve: {
     alias:
       conf.command === "build" ||
-      !fs.existsSync(path.resolve(__dirname, "../../packages/core/src"))
+      !fs.existsSync(path.resolve(__dirname, "../../../packages/core/src"))
         ? {}
         : ({
             // Comment out the lines below to load a built version of blocknote
             // or, keep as is to load live from sources with live reload working
             "@blocknote/core": path.resolve(
               __dirname,
-              "../../packages/core/src/"
+              "../../../packages/core/src/"
             ),
             "@blocknote/react": path.resolve(
               __dirname,
-              "../../packages/react/src/"
+              "../../../packages/react/src/"
             ),
           } as any),
   },

examples/01-basic/05-removing-default-blocks/vite.config.ts

@@ -14,18 +14,18 @@ export default defineConfig((conf) => ({
   resolve: {
     alias:
       conf.command === "build" ||
-      !fs.existsSync(path.resolve(__dirname, "../../packages/core/src"))
+      !fs.existsSync(path.resolve(__dirname, "../../../packages/core/src"))
         ? {}
         : ({
             // Comment out the lines below to load a built version of blocknote
             // or, keep as is to load live from sources with live reload working
             "@blocknote/core": path.resolve(
               __dirname,
-              "../../packages/core/src/"
+              "../../../packages/core/src/"
             ),
             "@blocknote/react": path.resolve(
               __dirname,
-              "../../packages/react/src/"
+              "../../../packages/react/src/"
             ),
           } as any),
   },

examples/01-basic/06-block-manipulation/vite.config.ts

@@ -14,18 +14,18 @@ export default defineConfig((conf) => ({
   resolve: {
     alias:
       conf.command === "build" ||
-      !fs.existsSync(path.resolve(__dirname, "../../packages/core/src"))
+      !fs.existsSync(path.resolve(__dirname, "../../../packages/core/src"))
         ? {}
         : ({
             // Comment out the lines below to load a built version of blocknote
             // or, keep as is to load live from sources with live reload working
             "@blocknote/core": path.resolve(
               __dirname,
-              "../../packages/core/src/"
+              "../../../packages/core/src/"
             ),
             "@blocknote/react": path.resolve(
               __dirname,
-              "../../packages/react/src/"
+              "../../../packages/react/src/"
             ),
           } as any),
   },

examples/01-basic/07-selection-blocks/vite.config.ts

@@ -14,18 +14,18 @@ export default defineConfig((conf) => ({
   resolve: {
     alias:
       conf.command === "build" ||
-      !fs.existsSync(path.resolve(__dirname, "../../packages/core/src"))
+      !fs.existsSync(path.resolve(__dirname, "../../../packages/core/src"))
         ? {}
         : ({
             // Comment out the lines below to load a built version of blocknote
             // or, keep as is to load live from sources with live reload working
             "@blocknote/core": path.resolve(
               __dirname,
-              "../../packages/core/src/"
+              "../../../packages/core/src/"
             ),
             "@blocknote/react": path.resolve(
               __dirname,
-              "../../packages/react/src/"
+              "../../../packages/react/src/"
             ),
           } as any),
   },

examples/01-basic/08-ariakit/vite.config.ts

@@ -14,18 +14,18 @@ export default defineConfig((conf) => ({
   resolve: {
     alias:
       conf.command === "build" ||
-      !fs.existsSync(path.resolve(__dirname, "../../packages/core/src"))
+      !fs.existsSync(path.resolve(__dirname, "../../../packages/core/src"))
         ? {}
         : ({
             // Comment out the lines below to load a built version of blocknote
             // or, keep as is to load live from sources with live reload working
             "@blocknote/core": path.resolve(
               __dirname,
-              "../../packages/core/src/"
+              "../../../packages/core/src/"
             ),
             "@blocknote/react": path.resolve(
               __dirname,
-              "../../packages/react/src/"
+              "../../../packages/react/src/"
             ),
           } as any),
   },

examples/01-basic/09-shadcn/vite.config.ts

@@ -14,18 +14,18 @@ export default defineConfig((conf) => ({
   resolve: {
     alias:
       conf.command === "build" ||
-      !fs.existsSync(path.resolve(__dirname, "../../packages/core/src"))
+      !fs.existsSync(path.resolve(__dirname, "../../../packages/core/src"))
         ? {}
         : ({
             // Comment out the lines below to load a built version of blocknote
             // or, keep as is to load live from sources with live reload working
             "@blocknote/core": path.resolve(
               __dirname,
-              "../../packages/core/src/"
+              "../../../packages/core/src/"
             ),
             "@blocknote/react": path.resolve(
               __dirname,
-              "../../packages/react/src/"
+              "../../../packages/react/src/"
             ),
           } as any),
   },

examples/01-basic/10-localization/vite.config.ts

@@ -14,18 +14,18 @@ export default defineConfig((conf) => ({
   resolve: {
     alias:
       conf.command === "build" ||
-      !fs.existsSync(path.resolve(__dirname, "../../packages/core/src"))
+      !fs.existsSync(path.resolve(__dirname, "../../../packages/core/src"))
         ? {}
         : ({
             // Comment out the lines below to load a built version of blocknote
             // or, keep as is to load live from sources with live reload working
             "@blocknote/core": path.resolve(
               __dirname,
-              "../../packages/core/src/"
+              "../../../packages/core/src/"
             ),
             "@blocknote/react": path.resolve(
               __dirname,
-              "../../packages/react/src/"
+              "../../../packages/react/src/"
             ),
           } as any),
   },

examples/01-basic/11-custom-placeholder/vite.config.ts

@@ -14,18 +14,18 @@ export default defineConfig((conf) => ({
   resolve: {
     alias:
       conf.command === "build" ||
-      !fs.existsSync(path.resolve(__dirname, "../../packages/core/src"))
+      !fs.existsSync(path.resolve(__dirname, "../../../packages/core/src"))
         ? {}
         : ({
             // Comment out the lines below to load a built version of blocknote
             // or, keep as is to load live from sources with live reload working
             "@blocknote/core": path.resolve(
               __dirname,
-              "../../packages/core/src/"
+              "../../../packages/core/src/"
             ),
             "@blocknote/react": path.resolve(
               __dirname,
-              "../../packages/react/src/"
+              "../../../packages/react/src/"
             ),
           } as any),
   },