feat(blocks): auto scroll block into view when keyboard tool opened (#…

…8609)
toeverything · Oct 28, 2024 · 7ab9691 · 7ab9691
1 parent d02ec2e
commit 7ab9691
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 17 deletions.
diff --git a/packages/blocks/src/root-block/widgets/keyboard-toolbar/keyboard-tool-panel.ts b/packages/blocks/src/root-block/widgets/keyboard-toolbar/keyboard-tool-panel.ts
@@ -67,19 +67,10 @@ export class AffineKeyboardToolPanel extends SignalWatcher(
   protected override willUpdate(changedProperties: PropertyValues<this>) {
     if (changedProperties.has('height')) {
       this.style.height = `${this.height}px`;
-    }
-
-    // Make panel be available when there is not virtual keyboard,
-    // such as mobile simulator in developer tools, or physical keyboard is used in mobile.
-    if (changedProperties.has('config')) {
       if (this.height === 0) {
-        if (this.config !== null) {
-          this.style.padding = '';
-          this.style.height = '250px';
-        } else {
-          this.style.padding = '0';
-          this.style.height = '0';
-        }
+        this.style.padding = '0';
+      } else {
+        this.style.padding = '';
       }
     }
   }

diff --git a/packages/blocks/src/root-block/widgets/keyboard-toolbar/keyboard-toolbar.ts b/packages/blocks/src/root-block/widgets/keyboard-toolbar/keyboard-toolbar.ts
@@ -25,6 +25,7 @@ import {
   isKeyboardSubToolBarConfig,
   isKeyboardToolBarActionItem,
   isKeyboardToolPanelConfig,
+  scrollCurrentBlockIntoView,
   VirtualKeyboardController,
 } from './utils.js';
 
@@ -73,6 +74,7 @@ export class AffineKeyboardToolbar extends SignalWatcher(
         this._currentPanelIndex$.value = index;
         this._shrink$.value = false;
         this._keyboardController.hide();
+        scrollCurrentBlockIntoView(this.rootComponent.std);
       }
     }
   };
@@ -86,12 +88,18 @@ export class AffineKeyboardToolbar extends SignalWatcher(
         this._keyboardController.show();
         this._shrink$.value = false;
         this._closeToolPanel();
+
+        // workaround for the virtual keyboard showing transition animation
+        setTimeout(() => {
+          scrollCurrentBlockIntoView(this.rootComponent.std);
+        }, 100);
       }
     });
   };
 
   private readonly _keyboardController = new VirtualKeyboardController(this);
 
+  /** This field records the panel static height, which dose not aim to control the panel opening */
   private readonly _panelHeight$ = signal(0);
 
   private readonly _path$ = signal<number[]>([]);
@@ -190,9 +198,11 @@ export class AffineKeyboardToolbar extends SignalWatcher(
 
     this.disposables.addFromEvent(this.rootComponent, 'focus', () => {
       this._showToolbar$.value = true;
+      this._shrink$.value = false;
     });
     this.disposables.addFromEvent(this.rootComponent, 'blur', () => {
       this._showToolbar$.value = false;
+      this._shrink$.value = true;
     });
 
     // prevent editor blur when click item in toolbar
@@ -202,8 +212,10 @@ export class AffineKeyboardToolbar extends SignalWatcher(
 
     this.disposables.add(
       effect(() => {
-        if (this._keyboardController.keyboardHeight !== 0) {
+        if (this._keyboardController.opened) {
           this._panelHeight$.value = this._keyboardController.keyboardHeight;
+        } else if (this._isPanelOpened && this._panelHeight$.peek() === 0) {
+          this._panelHeight$.value = 260;
         }
       })
     );
@@ -214,10 +226,12 @@ export class AffineKeyboardToolbar extends SignalWatcher(
           document.body.style.paddingBottom = '0px';
         } else if (this._shrink$.value) {
           document.body.style.paddingBottom = `${TOOLBAR_HEIGHT}px`;
-        } else if (this._keyboardController.keyboardHeight !== 0) {
+        } else if (this._keyboardController.opened) {
           document.body.style.paddingBottom = `${this._keyboardController.keyboardHeight + TOOLBAR_HEIGHT}px`;
-        } else {
+        } else if (this._isPanelOpened) {
           document.body.style.paddingBottom = `${this._panelHeight$.value + TOOLBAR_HEIGHT}px`;
+        } else {
+          document.body.style.paddingBottom = '0px';
         }
       })
     );

diff --git a/packages/blocks/src/root-block/widgets/keyboard-toolbar/styles.ts b/packages/blocks/src/root-block/widgets/keyboard-toolbar/styles.ts
@@ -66,6 +66,7 @@ export const keyboardToolPanelStyles = css`
     padding: 16px 4px 8px 8px;
     overflow-y: auto;
     box-sizing: border-box;
+    background-color: ${unsafeCSSVarV2('layer/background/primary')};
   }
 
   ${scrollbarStyle(':host')}
@@ -92,7 +93,7 @@ export const keyboardToolPanelStyles = css`
   .keyboard-tool-panel-group-item-container {
     width: 100%;
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(4, minmax(0, 1fr));
     column-gap: 12px;
     row-gap: 12px;
   }
@@ -123,11 +124,15 @@ export const keyboardToolPanelStyles = css`
     }
 
     span {
+      width: 100%;
       font-family: SF Pro;
       font-size: 13px;
       font-weight: 400;
       line-height: 18px;
       text-align: center;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow-x: hidden;
       color: ${unsafeCSSVarV2('text/secondary')};
     }
   }

diff --git a/packages/blocks/src/root-block/widgets/keyboard-toolbar/utils.ts b/packages/blocks/src/root-block/widgets/keyboard-toolbar/utils.ts
@@ -1,3 +1,4 @@
+import type { BlockStdScope } from '@blocksuite/block-std';
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
 
 import { DisposableGroup } from '@blocksuite/global/utils';
@@ -64,7 +65,7 @@ export class VirtualKeyboardController implements ReactiveController {
   }
 
   get opened() {
-    return this.keyboardHeight !== 0;
+    return this.keyboardHeight > 0;
   }
 
   constructor(
@@ -142,3 +143,21 @@ export function isKeyboardToolPanelConfig(
 ): item is KeyboardToolPanelConfig {
   return 'groups' in item;
 }
+
+export function scrollCurrentBlockIntoView(std: BlockStdScope) {
+  std.command
+    .chain()
+    .getSelectedModels()
+    .inline(({ selectedModels }) => {
+      if (!selectedModels?.length) return;
+
+      const block = std.view.getBlock(selectedModels[0].id);
+      if (!block) return;
+
+      block.scrollIntoView({
+        behavior: 'instant',
+        block: 'nearest',
+      });
+    })
+    .run();
+}