fix: slash menu scroll behavior (#1386)

Milkdown · Jun 19, 2024 · cc6a3eb · cc6a3eb
1 parent 097532e
commit cc6a3eb
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git a/packages/crepe/src/feature/block-edit/menu/component.ts b/packages/crepe/src/feature/block-edit/menu/component.ts
@@ -53,13 +53,20 @@ export const menuComponent: Component<MenuProps> = ({
   }, [])
 
   const scrollToIndex = useCallback((index: number) => {
-    host
+    const target = host
       .current
-      .querySelector(`[data-index="${index}"]`)
-      ?.scrollIntoView({
-        behavior: 'smooth',
-        block: 'end',
-      })
+      .querySelector<HTMLElement>(`[data-index="${index}"]`)
+    const scrollRoot = host.current.querySelector<HTMLElement>('.menu-groups')
+
+    if (!target || !scrollRoot)
+      return
+
+    scrollRoot.scrollTop = target.offsetTop - scrollRoot.offsetTop
+
+    // target?.scrollIntoView({
+    //   behavior: 'smooth',
+    //   block: 'end',
+    // })
   }, [])
 
   const runByIndex = useCallback((index: number) => {

diff --git a/packages/crepe/src/theme/common/block-edit.css b/packages/crepe/src/theme/common/block-edit.css
@@ -83,6 +83,8 @@
       padding: 0 12px 12px;
       max-height: 420px;
       overflow: auto;
+      overscroll-behavior: contain;
+      scroll-behavior: smooth;
 
       .menu-group {
         h6 {

diff --git a/packages/crepe/src/theme/common/cursor.css b/packages/crepe/src/theme/common/cursor.css
@@ -11,6 +11,5 @@
   .ProseMirror-gapcursor:after {
     box-sizing: border-box;
     border-top: 1px solid var(--crepe-color-on-background);
-    top: -40px;
   }
 }