refactor: simplify editor.host getter without .value (#5876)

README.md

@@ -58,7 +58,7 @@ The above design ensures that BlockSuite is built for scalability. In addition t
 - Incremental updates, real-time collaboration, local-first state management, and even decentralized data synchronization based on the document's [provider](https://blocksuite.io/data-persistence.html#realtime-provider-based-persistence) mechanism.
 - State scheduling across multiple documents and simultaneous use of a single document in multiple editors based on an opt-in workspace mechanism.
 
-> 🚧 BlockSuite is currently in beta, with some extension capabilities still under refinement. Hope you can stay tuned, try it out, or share your feedback!
+> 🚧 BlockSuite is currently in its early stage, with some extension capabilities still under refinement. Hope you can stay tuned, try it out, or share your feedback!
 
 ## Getting Started
 

packages/blocks/src/bookmark-block/doc-bookmark-block.ts

@@ -32,7 +32,7 @@ export class DocBookmarkBlockComponent extends WithDisposable(
     return this.block.model;
   }
 
-  get root() {
+  get host() {
     return this.block.host;
   }
 
@@ -43,7 +43,7 @@ export class DocBookmarkBlockComponent extends WithDisposable(
     }
 
     this.disposables.add(
-      this.root.selection.slots.changed.on(() => this.requestUpdate())
+      this.host.selection.slots.changed.on(() => this.requestUpdate())
     );
   }
 

packages/docs/blocksuite-overview.md

@@ -43,4 +43,4 @@ The above design ensures that BlockSuite is built for scalability. In addition t
 
 To try out BlockSuite, refer to the [Quick Start](./quick-start) document and start with the preset editors in `@blocksuite/presets`.
 
-> 🚧 BlockSuite is currently in beta, with some extension capabilities still under refinement. Hope you can stay tuned, try it out, or share your feedback!
+> 🚧 BlockSuite is currently in its early stage, with some extension capabilities still under refinement. Hope you can stay tuned, try it out, or share your feedback!

packages/playground/apps/starter/components/debug-menu.ts

@@ -262,7 +262,7 @@ export class DebugMenu extends ShadowlessElement {
     super.connectedCallback();
 
     const readSelectionFromURL = async () => {
-      const root = this.editor.root;
+      const root = this.editor.host;
       if (!root) {
         await new Promise(resolve => {
           setTimeout(resolve, 500);
@@ -363,7 +363,7 @@ export class DebugMenu extends ShadowlessElement {
         children,
       };
     };
-    const blocks = getSelectedBlocks(this.editor.root!);
+    const blocks = getSelectedBlocks(this.editor.host!);
     const toTreeNode = (block: BaseBlockModel): TreeNode => {
       return {
         text: block.text?.toString() ?? '',
@@ -480,7 +480,7 @@ export class DebugMenu extends ShadowlessElement {
   }
 
   private _shareSelection() {
-    const selection = this.editor.root?.selection.value;
+    const selection = this.editor.host?.selection.value;
     if (!selection || selection.length === 0) {
       return;
     }

packages/presets/src/__tests__/utils/edgeless.ts

@@ -12,7 +12,7 @@ import type { AffineEditorContainer } from '../../index.js';
 export function getSurface(page: Page, editor: AffineEditorContainer) {
   const surfaceModel = page.getBlockByFlavour('affine:surface');
 
-  return editor.root!.view.viewFromPath('block', [
+  return editor.host!.view.viewFromPath('block', [
     page.root!.id,
     surfaceModel[0]!.id,
   ]) as SurfaceBlockComponent;
@@ -33,7 +33,7 @@ export function getPageRootBlock(
   editor: AffineEditorContainer,
   _?: 'edgeless' | 'page'
 ) {
-  return editor.root!.view.viewFromPath('block', [page.root!.id]) as
+  return editor.host!.view.viewFromPath('block', [page.root!.id]) as
     | EdgelessPageBlockComponent
     | DocPageBlockComponent;
 }

packages/presets/src/editors/doc-editor.ts

@@ -19,7 +19,11 @@ export class DocEditor extends WithDisposable(ShadowlessElement) {
   @property({ type: Boolean })
   hasViewport = true;
 
-  host: Ref<EditorHost> = createRef<EditorHost>();
+  private _host: Ref<EditorHost> = createRef<EditorHost>();
+
+  get host() {
+    return this._host.value;
+  }
 
   override render() {
     return html`
@@ -59,7 +63,7 @@ export class DocEditor extends WithDisposable(ShadowlessElement) {
           : 'doc-editor-container'}
       >
         <editor-host
-          ${ref(this.host)}
+          ${ref(this._host)}
           .page=${this.page}
           .specs=${this.specs}
         ></editor-host>

packages/presets/src/editors/edgeless-editor.ts

@@ -16,7 +16,11 @@ export class EdgelessEditor extends WithDisposable(ShadowlessElement) {
   @property({ attribute: false })
   specs = EdgelessEditorBlockSpecs;
 
-  host: Ref<EditorHost> = createRef<EditorHost>();
+  private _host: Ref<EditorHost> = createRef<EditorHost>();
+
+  get host() {
+    return this._host.value;
+  }
 
   override render() {
     return html`
@@ -39,7 +43,7 @@ export class EdgelessEditor extends WithDisposable(ShadowlessElement) {
         }
       </style>
       <editor-host
-        ${ref(this.host)}
+        ${ref(this._host)}
         .page=${this.page}
         .specs=${this.specs}
       ></editor-host>

packages/presets/src/editors/editor-container.ts

@@ -10,7 +10,11 @@ import {
   ThemeObserver,
 } from '@blocksuite/blocks';
 import { assertExists, noop, Slot } from '@blocksuite/global/utils';
-import { ShadowlessElement, WithDisposable } from '@blocksuite/lit';
+import {
+  type EditorHost,
+  ShadowlessElement,
+  WithDisposable,
+} from '@blocksuite/lit';
 import type { Page } from '@blocksuite/store';
 import { html, nothing } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
@@ -64,10 +68,10 @@ export class AffineEditorContainer
   @query('affine-edgeless-page')
   private _edgelessPage?: EdgelessPageBlockComponent;
 
-  get root() {
-    return this.mode === 'page'
-      ? this._docPage?.host
-      : this._edgelessPage?.host;
+  get host() {
+    return (
+      this.mode === 'page' ? this._docPage?.host : this._edgelessPage?.host
+    ) as EditorHost;
   }
 
   readonly themeObserver = new ThemeObserver();
@@ -85,7 +89,7 @@ export class AffineEditorContainer
 
   override async getUpdateComplete(): Promise<boolean> {
     const result = await super.getUpdateComplete();
-    const root = this.root;
+    const root = this.host;
     if (root) {
       await root.updateComplete;
     }

packages/presets/src/fragments/copilot-panel/copilot-panel.ts

@@ -1,11 +1,7 @@
 import './chat-with-workspace/chat-with-workspace.js';
 
 import { FrameBlockModel } from '@blocksuite/blocks';
-import {
-  type EditorHost,
-  ShadowlessElement,
-  WithDisposable,
-} from '@blocksuite/lit';
+import { ShadowlessElement, WithDisposable } from '@blocksuite/lit';
 import { css, html, nothing, type TemplateResult } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -97,8 +93,8 @@ export class CopilotPanel extends WithDisposable(ShadowlessElement) {
     return this.editor.page;
   }
 
-  get root() {
-    return this.editor.root as EditorHost;
+  get host() {
+    return this.editor.host;
   }
 
   public override connectedCallback() {
@@ -113,7 +109,7 @@ export class CopilotPanel extends WithDisposable(ShadowlessElement) {
   private async _replace() {
     if (!this._result) return;
 
-    const selectedBlocks = await getSelectedBlocks(this.root);
+    const selectedBlocks = await getSelectedBlocks(this.host);
     if (!selectedBlocks.length) return;
 
     const firstBlock = selectedBlocks[0];
@@ -128,7 +124,7 @@ export class CopilotPanel extends WithDisposable(ShadowlessElement) {
     });
 
     const models = await insertFromMarkdown(
-      this.root,
+      this.host,
       this._result,
       parentBlock.model.id,
       firstIndex
@@ -137,15 +133,15 @@ export class CopilotPanel extends WithDisposable(ShadowlessElement) {
       const parentPath = firstBlock.parentPath;
       const selections = models
         .map(model => [...parentPath, model.id])
-        .map(path => this.root.selection.create('block', { path }));
-      this.root.selection.setGroup('note', selections);
+        .map(path => this.host.selection.create('block', { path }));
+      this.host.selection.setGroup('note', selections);
     }, 0);
   }
 
   private async _insertBelow() {
     if (!this._result) return;
 
-    const selectedBlocks = await getSelectedBlocks(this.root);
+    const selectedBlocks = await getSelectedBlocks(this.host);
     const blockLength = selectedBlocks.length;
     if (!blockLength) return;
 
@@ -157,7 +153,7 @@ export class CopilotPanel extends WithDisposable(ShadowlessElement) {
     ) as number;
 
     const models = await insertFromMarkdown(
-      this.root,
+      this.host,
       this._result,
       parentBlock.model.id,
       lastIndex + 1
@@ -167,8 +163,8 @@ export class CopilotPanel extends WithDisposable(ShadowlessElement) {
       const parentPath = lastBlock.parentPath;
       const selections = models
         .map(model => [...parentPath, model.id])
-        .map(path => this.root.selection.create('block', { path }));
-      this.root.selection.setGroup('note', selections);
+        .map(path => this.host.selection.create('block', { path }));
+      this.host.selection.setGroup('note', selections);
     }, 0);
   }
 
@@ -263,7 +259,7 @@ export class CopilotPanel extends WithDisposable(ShadowlessElement) {
     key: K,
     payload: Omit<GPTAPIPayloadMap[K], 'input'>
   ) => {
-    const input = await getSelectedTextContent(this.root);
+    const input = await getSelectedTextContent(this.host);
     if (!input) {
       alert('Please select some text first');
       return;

packages/presets/src/fragments/copilot-panel/edgeless/api.ts

@@ -5,8 +5,6 @@ import {
   FrameBlockModel,
   type ImageBlockProps,
 } from '@blocksuite/blocks';
-import { assertExists } from '@blocksuite/global/utils';
-import type { EditorHost } from '@blocksuite/lit';
 import type { Workspace } from '@blocksuite/store';
 
 import type { AffineEditorContainer } from '../../../editors/index.js';
@@ -53,9 +51,8 @@ export class EditorWithAI {
     return this.editor.page.workspace;
   }
 
-  get root(): EditorHost {
-    assertExists(this.editor.root);
-    return this.editor.root;
+  get host() {
+    return this.editor.host;
   }
 
   constructor(private editor: AffineEditorContainer) {}

packages/presets/src/fragments/frame-panel/frame-panel.ts

@@ -3,11 +3,7 @@ import './body/frame-panel-body.js';
 
 import { FramePreview } from '@blocksuite/blocks';
 import { DisposableGroup } from '@blocksuite/global/utils';
-import {
-  type EditorHost,
-  ShadowlessElement,
-  WithDisposable,
-} from '@blocksuite/lit';
+import { ShadowlessElement, WithDisposable } from '@blocksuite/lit';
 import { baseTheme } from '@toeverything/theme';
 import { css, html, type PropertyValues, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -86,7 +82,7 @@ export class FramePanel extends WithDisposable(ShadowlessElement) {
   }
 
   get host() {
-    return this.editor.root as EditorHost;
+    return this.editor.host;
   }
 
   get edgeless() {

packages/presets/src/fragments/toc-panel/toc-panel.ts

@@ -1,5 +1,4 @@
 import { DisposableGroup } from '@blocksuite/global/utils';
-import type { EditorHost } from '@blocksuite/lit';
 import { WithDisposable } from '@blocksuite/lit';
 import { baseTheme } from '@toeverything/theme';
 import { css, html, LitElement, type PropertyValues, unsafeCSS } from 'lit';
@@ -57,7 +56,7 @@ export class TOCPanel extends WithDisposable(LitElement) {
   }
 
   get host() {
-    return this.editor.root as EditorHost;
+    return this.editor.host;
   }
 
   get edgeless() {