Fixed AI Menu position for empty blocks

Author: matthewlipski

packages/ai/src/core/extensions/AIMenu/AIMenuPlugin.ts

@@ -6,7 +6,9 @@ import {
 import { Plugin, PluginKey, PluginView } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 
-export type AIMenuState = UiElementPosition;
+export type AIMenuState = UiElementPosition & {
+  blockIsEmpty: boolean;
+};
 
 export class AIMenuView implements PluginView {
   public state?: AIMenuState;
@@ -100,6 +102,7 @@ export class AIMenuView implements PluginView {
       this.state = {
         show: true,
         referencePos: this.domElement.getBoundingClientRect(),
+        blockIsEmpty: blockInfo.contentNode.content.size === 0,
       };
 
       this.emitUpdate();

packages/ai/src/react/components/AIMenu/AIMenuController.tsx

@@ -41,7 +41,11 @@ export const AIMenuController = (props: { aiMenu?: FC<AIMenuProps> }) => {
   return (
     <div
       ref={ref}
-      style={{ ...style, width: state.referencePos.width }}
+      style={{
+        ...style,
+        width: state.referencePos.width,
+        top: state.blockIsEmpty ? -state.referencePos.height - 3 : style.top,
+      }}
       {...getFloatingProps()}>
       <Component />
     </div>