fix(react): flip the suggestion menu above earlier

packages/react/src/components/SuggestionMenu/suggestionMenuMiddleware.ts

@@ -13,10 +13,10 @@ const PADDING = 10;
 const MAX_HEIGHT = 600;
 
 /**
- * The least room (px) the menu needs below its trigger. With less room, the
- * menu goes above instead, if there is more room there.
+ * The least room (px) the menu needs below its trigger: about five items.
+ * With less room, the menu goes above instead, if there is more room there.
  */
-const MIN_HEIGHT = 200;
+const MIN_HEIGHT = 300;
 
 /**
  * Places the menu below its trigger, unless there is less than `MIN_HEIGHT`

tests/src/end-to-end/slashmenu/suggestionMenuPlacement.test.tsx

@@ -23,7 +23,7 @@
 let editor: BlockNoteEditor;
 
 function Editor(props: { slowItems?: boolean }) {
   editor = useCreateBlockNote({
     initialContent: Array.from({ length: 40 }, (_, i) => ({
       type: "paragraph" as const,
       content: `Paragraph ${i}`,
@@ -110,11 +110,18 @@
 }
 
 test("stays below the trigger when there is enough room, even with more room above", async () => {
-  // About 300px below the trigger, more above.
-  const menu = await openSlashMenuAt(innerHeight * 0.55);
+  // About 380px below the trigger, more above.
+  const menu = await openSlashMenuAt(innerHeight * 0.45);
   expect(side(menu)).toBe("below");
 });
 
+test("goes above the trigger when the room below fits only a few items", async () => {
+  // About 250px below the trigger: a menu there would show only about four
+  // items, with more room above.
+  const menu = await openSlashMenuAt(innerHeight * 0.62);
+  expect(side(menu)).toBe("above");
+});
+
 test("is no taller than its maximum height, even with more room", async () => {
   // A taller window than the default 720px, so the room below the trigger
   // (about 850px) is more than the maximum height.