From b5ef361f8713035f147edab4fa7a597664fb1be4 Mon Sep 17 00:00:00 2001
From: fundon <fundon@pindash.io>
Date: Mon, 9 Jun 2025 11:19:13 +0000
Subject: [PATCH] fix(editor): toolbar shaking when setting inline style
 (#12765)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes: [BS-1748](https://linear.app/affine-design/issue/BS-1748/improvement-toolbar-应用样式后会移动)

[Screen Recording 2025-06-09 at 17.59.01.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/8ypiIKZXudF5a0tIgIzf/a3941ec8-6b97-48e5-ba9b-484deb792d44.mov" />](https://app.graphite.dev/media/video/8ypiIKZXudF5a0tIgIzf/a3941ec8-6b97-48e5-ba9b-484deb792d44.mov)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **New Features**
  - Improved animation and transition effects for inline toolbars, providing a smoother user experience when toolbars appear or disappear.
- **Bug Fixes**
  - Ensured that the inline attribute is correctly removed when the toolbar is hidden, preventing visual inconsistencies.
- **Style**
  - Updated toolbar transition timing for more natural animations.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 blocksuite/affine/widgets/toolbar/src/toolbar.ts |  6 ++++++
 blocksuite/affine/widgets/toolbar/src/utils.ts   | 15 +++++++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/blocksuite/affine/widgets/toolbar/src/toolbar.ts b/blocksuite/affine/widgets/toolbar/src/toolbar.ts
index 2052b641ad..e1c5143f4e 100644
--- a/blocksuite/affine/widgets/toolbar/src/toolbar.ts
+++ b/blocksuite/affine/widgets/toolbar/src/toolbar.ts
@@ -80,6 +80,11 @@ export class AffineToolbarWidget extends WidgetComponent {
       }
     }
 
+    editor-toolbar[data-open][data-inline='true'] {
+      transition-property: opacity, overlay, display, transform;
+      transition-timing-function: ease;
+    }
+
     editor-toolbar[data-placement='inner'] {
       background-color: unset;
       box-shadow: unset;
@@ -632,6 +637,7 @@ export class AffineToolbarWidget extends WidgetComponent {
 
         // Hides toolbar
         if (Flag.None === value || flags.check(Flag.Hiding, value)) {
+          if ('inline' in toolbar.dataset) delete toolbar.dataset.inline;
           if (toolbar.dataset.open) delete toolbar.dataset.open;
           // Closes dropdown menus
           toolbar
diff --git a/blocksuite/affine/widgets/toolbar/src/utils.ts b/blocksuite/affine/widgets/toolbar/src/utils.ts
index 3d9f2fb3f6..5c0424325f 100644
--- a/blocksuite/affine/widgets/toolbar/src/utils.ts
+++ b/blocksuite/affine/widgets/toolbar/src/utils.ts
@@ -29,7 +29,7 @@ import {
   shift,
   size,
 } from '@floating-ui/dom';
-import { html, nothing, render } from 'lit';
+import { html, render } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { join } from 'lit/directives/join.js';
 import { keyed } from 'lit/directives/keyed.js';
@@ -297,11 +297,22 @@ export function renderToolbar(
   render(
     join(
       renderActions(primaryActionGroup, context),
-      innerToolbar ? nothing : renderToolbarSeparator()
+      innerToolbar ? null : renderToolbarSeparator()
     ),
     toolbar
   );
 
+  // Avoids shaking
+  if (flavour === 'affine:note' && context.std.range.value) {
+    if (!('inline' in toolbar.dataset)) {
+      toolbar.dataset.inline = '';
+    } else {
+      toolbar.dataset.inline = 'true';
+    }
+  } else {
+    delete toolbar.dataset.inline;
+  }
+
   if (toolbar.dataset.open) return;
   toolbar.dataset.open = 'true';
 }