From 2b47625deb422cde954758fb0ba3da3748354b8a Mon Sep 17 00:00:00 2001
From: doodlewind <7312949+doodlewind@users.noreply.github.com>
Date: Tue, 31 Dec 2024 02:01:35 +0000
Subject: [PATCH] refactor(editor): render presentation toolbar on demand
 (#9442)

---
 .../components/toolbar/edgeless-toolbar.ts    | 23 ++++++++++---------
 .../toolbar/presentation-toolbar.ts           |  5 +---
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/edgeless-toolbar.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/edgeless-toolbar.ts
index 4bb387acf7..653950a2cc 100644
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/edgeless-toolbar.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/edgeless-toolbar.ts
@@ -657,17 +657,18 @@ export class EdgelessToolbarWidget extends WidgetComponent<
               @mousedown=${stopPropagation}
               @pointerdown=${stopPropagation}
             >
-              <presentation-toolbar
-                .visible=${this.isPresentMode}
-                .edgeless=${this.block}
-                .settingMenuShow=${this.presentSettingMenuShow}
-                .frameMenuShow=${this.presentFrameMenuShow}
-                .setSettingMenuShow=${(show: boolean) =>
-                  (this.presentSettingMenuShow = show)}
-                .setFrameMenuShow=${(show: boolean) =>
-                  (this.presentFrameMenuShow = show)}
-                .containerWidth=${this.containerWidth}
-              ></presentation-toolbar>
+              ${this.isPresentMode
+                ? html`<presentation-toolbar
+                    .edgeless=${this.block}
+                    .settingMenuShow=${this.presentSettingMenuShow}
+                    .frameMenuShow=${this.presentFrameMenuShow}
+                    .setSettingMenuShow=${(show: boolean) =>
+                      (this.presentSettingMenuShow = show)}
+                    .setFrameMenuShow=${(show: boolean) =>
+                      (this.presentFrameMenuShow = show)}
+                    .containerWidth=${this.containerWidth}
+                  ></presentation-toolbar>`
+                : nothing}
               ${this.isPresentMode ? nothing : this._renderContent()}
             </div>
           </smooth-corner>
diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/presentation-toolbar.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/presentation-toolbar.ts
index 74a658c83d..3260ca6c0f 100644
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/presentation-toolbar.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/presentation-toolbar.ts
@@ -322,7 +322,7 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin(
     return html`
       <style>
         :host {
-          display: ${this.visible ? 'flex' : 'none'};
+          display: flex;
         }
       </style>
       <edgeless-tool-icon-button
@@ -442,9 +442,6 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin(
 
   @property({ type: Boolean })
   accessor settingMenuShow = false;
-
-  @property({ attribute: true, type: Boolean })
-  accessor visible = true;
 }
 
 declare global {