wip

Author: YousefED

.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/App.tsx

@@ -2,7 +2,7 @@ import {
   AIBlock,
   AIBlockToolbarProsemirrorPlugin,
   AIButton,
-  AIInlineToolbarProsemirrorPlugin,
+  AIShowSelectionPlugin,
   BlockNoteAIContextProvider,
   BlockNoteAIUI,
   aiBlockTypeSelectItems,
@@ -49,7 +49,7 @@ export default function App() {
     extensions: {
       // TODO: things will break when user provides different keys. Define name on plugins instead?
       aiBlockToolbar: new AIBlockToolbarProsemirrorPlugin(),
-      aiInlineToolbar: new AIInlineToolbarProsemirrorPlugin(),
+      aiSelection: new AIShowSelectionPlugin(),
     },
   });
 

packages/ai/src/api/api.ts

@@ -14,6 +14,7 @@ import { updateFunction } from "./functions/update";
 import { createOperationsArraySchema } from "./schema/operations";
 import { blockNoteSchemaToJSONSchema } from "./schema/schemaToJSONSchema";
 
+// TODO don't include child block
 export function createMessagesForLLM(opts: {
   editor: BlockNoteEditor;
   prompt: string;

packages/ai/src/components/AIMenu/BlockPositioner.tsx

@@ -1,7 +1,12 @@
 import { useUIElementPositioning } from "@blocknote/react";
-import { OpenChangeReason, flip, offset, size } from "@floating-ui/react";
+import {
+  OpenChangeReason,
+  autoUpdate,
+  flip,
+  offset,
+  size,
+} from "@floating-ui/react";
 import { useMemo } from "react";
-
 // The block positioner automattically positions it's children below the block with `blockID`
 export const BlockPositioner = (props: {
   blockID?: string;
@@ -47,6 +52,7 @@ export const BlockPositioner = (props: {
         }),
       ],
       onOpenChange: props.onOpenChange,
+      whileElementsMounted: autoUpdate,
     }
   );
 

packages/ai/src/components/BlockNoteAIUI.tsx

@@ -1,6 +1,5 @@
 import { useBlockNoteEditor } from "@blocknote/react";
 import { AIBlockToolbarController } from "./AIBlockToolbar/AIBlockToolbarController";
-import { AIInlineToolbarController } from "./AIInlineToolbar/AIInlineToolbarController";
 
 import { AIMenu } from "./AIMenu/AIMenu";
 import { BlockPositioner } from "./AIMenu/BlockPositioner";
@@ -26,7 +25,6 @@ export function BlockNoteAIUI(props: BlockNoteAIUIProps) {
       {editor.extensions.aiBlockToolbar && props.aiBlockToolbar !== false && (
         <AIBlockToolbarController />
       )}
-      {props.aiInlineToolbar !== false && <AIInlineToolbarController />}
       {props.aiMenu !== false && <AIMenuController />}
     </>
   );

packages/ai/src/extensions/AIShowSelectionPlugin.ts

@@ -0,0 +1,26 @@
+import type { BlockNoteEditor } from "@blocknote/core";
+import { Plugin, PluginKey } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+
+const PLUGIN_KEY = new PluginKey(`blocknote-ai-show-selection`);
+
+export class AIShowSelectionPlugin {
+  public readonly plugin: Plugin;
+
+  public constructor(_editor: BlockNoteEditor<any, any, any>) {
+    this.plugin = new Plugin({
+      key: PLUGIN_KEY,
+      props: {
+        decorations: (state) => {
+          const { doc, selection } = state;
+
+          const dec = Decoration.inline(selection.from, selection.to, {
+            "data-ai-show-selection": "true",
+          });
+
+          return DecorationSet.create(doc, [dec]);
+        },
+      },
+    });
+  }
+}

packages/ai/src/index.ts

@@ -3,7 +3,7 @@ import "./style.css";
 export * from "./blocks/AIBlockContent/AIBlockContent";
 export * from "./blocks/AIBlockContent/mockAIFunctions";
 export * from "./extensions/AIBlockToolbar/AIBlockToolbarPlugin";
-export * from "./extensions/AIInlineToolbar/AIInlineToolbarPlugin";
+export * from "./extensions/AIShowSelectionPlugin";
 
 export * from "./components/AIBlockToolbar/AIBlockToolbar";
 export * from "./components/AIBlockToolbar/AIBlockToolbarController";

packages/ai/src/style.css

@@ -77,3 +77,8 @@ div:not(.bn-popover-content) > .bn-combobox-items:not(:empty) {
 /*.bn-toolbar .mantine-Button-root.bn-show-prompt-button:hover {*/
 /*  color: rgba(154, 56, 173, 0.5);*/
 /*}*/
+
+[data-ai-show-selection] {
+  background-color: highlight;
+  padding: 2px 0;
+}

packages/core/src/pm-nodes/BlockContainer.ts

@@ -286,7 +286,7 @@ export const BlockContainer = Node.create<{
               state.tr
                 .replaceWith(
                   startPos,
-                  endPos,
+                  startPos + contentNode.nodeSize,
                   state.schema.nodes[newType].create(
                     {
                       ...contentNode.attrs,