feat: AI block UI

.gitignore

@@ -33,3 +33,4 @@ release
 /test-results/
 /playwright-report/
 /playwright/.cache/
+.env

.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

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

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

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

@@ -1,12 +1,95 @@
+import {
+ AIBlock,
+ AIBlockToolbarProsemirrorPlugin,
+ AIButton,
+ AIShowSelectionPlugin,
+ BlockNoteAIContextProvider,
+ BlockNoteAIUI,
+ aiBlockTypeSelectItems,
+ en as aiEN,
+ getAISlashMenuItems,
+ useBlockNoteAIContext,
+} from "@blocknote/ai";
+
+import "@blocknote/ai/style.css";
+import {
+ BlockNoteEditor,
+ BlockNoteSchema,
+ defaultBlockSpecs,
+ en,
+ filterSuggestionItems,
+} 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";
 
+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: {
+ ...en,
+ ai: aiEN,
+ } 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(aiEN),
+ ])}
+ <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/ai": "latest"
  },
  "devDependencies": {
  "@types/react": "^18.0.25",

examples/03-ui-components/02-formatting-toolbar-buttons/BlueButton.tsx

@@ -27,7 +27,7 @@ export function BlueButton() {
  }, editor);
 
  return (
- <Components.FormattingToolbar.Button
+ <Components.Toolbar.Button
  mainTooltip={"Blue Text & Background"}
  onClick={() => {
  editor.toggleStyles({
@@ -37,6 +37,6 @@ export function BlueButton() {
  }}
  isSelected={isSelected}>
  Blue
- </Components.FormattingToolbar.Button>
+ </Components.Toolbar.Button>
  );
 }

examples/03-ui-components/06-suggestion-menus-slash-menu-items/App.tsx

@@ -16,6 +16,7 @@ import { HiOutlineGlobeAlt } from "react-icons/hi";
 
 // Custom Slash Menu item to insert a block after the current one.
 const insertHelloWorldItem = (editor: BlockNoteEditor) => ({
+ name: "hello_world",
  title: "Insert Hello World",
  onItemClick: () => {
  // Block that the text cursor is currently in.

examples/03-ui-components/11-uppy-file-panel/FileReplaceButton.tsx

@@ -48,7 +48,7 @@ export const FileReplaceButton = () => {
  return (
  <Components.Generic.Popover.Root opened={isOpen} position={"bottom"}>
  <Components.Generic.Popover.Trigger>
- <Components.FormattingToolbar.Button
+ <Components.Toolbar.Button
  className={"bn-button"}
  onClick={() => setIsOpen(!isOpen)}
  isSelected={isOpen}

examples/03-ui-components/link-toolbar-buttons/AlertButton.tsx

@@ -5,12 +5,12 @@ export function AlertButton(props: LinkToolbarProps) {
  const Components = useComponentsContext()!;
 
  return (
- <Components.LinkToolbar.Button
+ <Components.Toolbar.Button
  mainTooltip={"Open Alert with URL"}
  onClick={() => {
  window.alert(`Link URL: ${props.url}`);
  }}>
  Open Alert
- </Components.LinkToolbar.Button>
+ </Components.Toolbar.Button>
  );
 }

examples/06-custom-schema/01-alert-block/App.tsx

@@ -29,6 +29,7 @@ const schema = BlockNoteSchema.create({
 
 // Slash menu item to insert an Alert block
 const insertAlert = (editor: typeof schema.BlockNoteEditor) => ({
+ name: "alert",
  title: "Alert",
  onItemClick: () => {
  insertOrUpdateBlock(editor, {

examples/06-custom-schema/02-suggestion-menus-mentions/App.tsx

@@ -32,6 +32,7 @@ const getMentionMenuItems = (
  const users = ["Steve", "Bob", "Joe", "Mike"];
 
  return users.map((user) => ({
+ name: user.toLowerCase(),
  title: user,
  onItemClick: () => {
  editor.insertInlineContent([

examples/06-custom-schema/03-font-style/App.tsx

@@ -44,7 +44,7 @@ const SetFontStyleButton = () => {
  const Components = useComponentsContext()!;
 
  return (
- <Components.FormattingToolbar.Button
+ <Components.Toolbar.Button
  label="Set Font"
  mainTooltip={"Set Font"}
  icon={<RiText />}

examples/06-custom-schema/04-pdf-file-block/App.tsx

@@ -30,6 +30,7 @@ const schema = BlockNoteSchema.create({
 
 // Slash menu item to insert a PDF block
 const insertPDF = (editor: typeof schema.BlockNoteEditor) => ({
+ name: "pdf",
  title: "PDF",
  onItemClick: () => {
  insertOrUpdateBlock(editor, {

examples/06-custom-schema/react-custom-styles/App.tsx

@@ -55,7 +55,7 @@ const CustomFormattingToolbar = (props: FormattingToolbarProps) => {
 
  return (
  <FormattingToolbar>
- <Components.FormattingToolbar.Button
+ <Components.Toolbar.Button
  mainTooltip={"small"}
  onClick={() => {
  editor.toggleStyles({
@@ -64,8 +64,8 @@ const CustomFormattingToolbar = (props: FormattingToolbarProps) => {
  }}
  isSelected={activeStyles.small}>
  Small
- </Components.FormattingToolbar.Button>
- <Components.FormattingToolbar.Button
+ </Components.Toolbar.Button>
+ <Components.Toolbar.Button
  mainTooltip={"font size"}
  onClick={() => {
  editor.toggleStyles({
@@ -74,7 +74,7 @@ const CustomFormattingToolbar = (props: FormattingToolbarProps) => {
  }}
  isSelected={!!activeStyles.fontSize}>
  Font size
- </Components.FormattingToolbar.Button>
+ </Components.Toolbar.Button>
  </FormattingToolbar>
  );
 };

examples/vanilla-js/react-vanilla-custom-styles/App.tsx

@@ -67,7 +67,7 @@ const CustomFormattingToolbar = (props: FormattingToolbarProps) => {
 
  return (
  <FormattingToolbar>
- <Components.FormattingToolbar.Button
+ <Components.Toolbar.Button
  mainTooltip={"small"}
  onClick={() => {
  editor.toggleStyles({
@@ -76,8 +76,8 @@ const CustomFormattingToolbar = (props: FormattingToolbarProps) => {
  }}
  isSelected={activeStyles.small}>
  Small
- </Components.FormattingToolbar.Button>
- <Components.FormattingToolbar.Button
+ </Components.Toolbar.Button>
+ <Components.Toolbar.Button
  mainTooltip={"font size"}
  onClick={() => {
  editor.toggleStyles({
@@ -86,7 +86,7 @@ const CustomFormattingToolbar = (props: FormattingToolbarProps) => {
  }}
  isSelected={!!activeStyles.fontSize}>
  Font size
- </Components.FormattingToolbar.Button>
+ </Components.Toolbar.Button>
  </FormattingToolbar>
  );
 };