fix: solve the command menu scrolling issue

packages/editor/package.json

@@ -94,6 +94,7 @@
     "prosemirror-model": "^1.19.3",
     "prosemirror-state": "^1.4.3",
     "prosemirror-view": "^1.31.6",
+    "scroll-into-view-if-needed": "^3.0.10",
     "tippy.js": "^6.3.7",
     "vue-i18n": "9.2.2"
   }

packages/editor/src/extensions/commands-menu/CommandsView.vue

@@ -2,6 +2,7 @@
 import { type PropType, ref, watch } from "vue";
 import type { CommandMenuItem } from "@/types";
 import { i18n } from "@/locales";
+import scrollIntoView from "scroll-into-view-if-needed";
 
 const props = defineProps({
   items: {
@@ -46,12 +47,10 @@ function onKeyDown({ event }: { event: KeyboardEvent }) {
 function handleKeyUp() {
   selectedIndex.value =
     (selectedIndex.value + props.items.length - 1) % props.items.length;
-  scrollToSelected();
 }
 
 function handleKeyDown() {
   selectedIndex.value = (selectedIndex.value + 1) % props.items.length;
-  scrollToSelected();
 }
 
 function handleKeyEnter() {
@@ -66,17 +65,18 @@ function handleSelectItem(index: number) {
   }
 }
 
-function scrollToSelected() {
-  const selected = document.getElementById(
-    `command-item-${selectedIndex.value}`
-  );
+watch(
+  () => selectedIndex.value,
+  () => {
+    const selected = document.getElementById(
+      `command-item-${selectedIndex.value}`
+    );
 
-  if (selected) {
-    selected.scrollIntoView({
-      behavior: "smooth",
-    });
+    if (selected) {
+      scrollIntoView(selected, { behavior: "smooth", scrollMode: "if-needed" });
+    }
   }
-}
+);
 
 defineExpose({
   onKeyDown,

packages/editor/src/extensions/commands-menu/commands.ts

@@ -1,10 +1,11 @@
 import { VueRenderer, type AnyExtension, type Range } from "@tiptap/vue-3";
-import { Editor, Extension } from "@tiptap/vue-3";
+import { Extension } from "@tiptap/vue-3";
 import Suggestion from "@tiptap/suggestion";
 import type { CommandMenuItem } from "@/types";
 import type { Instance } from "tippy.js";
 import CommandsView from "./CommandsView.vue";
 import tippy from "tippy.js";
+import type { Editor } from "@tiptap/core";
 
 export default Extension.create({
   name: "commands-menu",
@@ -25,7 +26,7 @@ export default Extension.create({
         }: {
           editor: Editor;
           range: Range;
-          props: Record<string, any>;
+          props: CommandMenuItem;
         }) => {
           props.command({ editor, range });
         },