refactor(editor): rename doc to store on block components (#12173)

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

## Summary by CodeRabbit

- **Refactor**
  - Unified internal data access by replacing all references from `doc` to `store` across all components, blocks, widgets, and utilities. This affects how readonly state, block operations, and service retrieval are handled throughout the application.
- **Tests**
  - Updated all test utilities and test cases to use `store` instead of `doc` for document-related operations.
- **Chores**
  - Updated context providers and property names to reflect the change from `doc` to `store` for improved consistency and maintainability.

No user-facing features or behaviors have changed.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/blocks/attachment/src/attachment-block.ts

@@ -79,7 +79,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
   };
 
   copy = () => {
-    const slice = Slice.fromModels(this.doc, [this.model]);
+    const slice = Slice.fromModels(this.store, [this.model]);
     this.std.clipboard.copySlice(slice).catch(console.error);
     toast(this.host, 'Copied to clipboard');
   };
@@ -133,9 +133,9 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
 
     this.refreshData();
 
-    if (!this.model.props.style && !this.doc.readonly) {
-      this.doc.withoutTransact(() => {
-        this.doc.updateBlock(this.model, {
+    if (!this.model.props.style && !this.store.readonly) {
+      this.store.withoutTransact(() => {
+        this.store.updateBlock(this.model, {
           style: AttachmentBlockStyles[1],
         });
       });

blocksuite/affine/blocks/bookmark/src/bookmark-block.ts

@@ -127,7 +127,10 @@ export class BookmarkBlockComponent extends CaptionedBlockComponent<BookmarkBloc
   handleClick = (event: MouseEvent) => {
     event.stopPropagation();
 
-    if (this.model.parent?.flavour !== 'affine:surface' && !this.doc.readonly) {
+    if (
+      this.model.parent?.flavour !== 'affine:surface' &&
+      !this.store.readonly
+    ) {
       this.selectBlock();
     }
   };
@@ -184,7 +187,7 @@ export class BookmarkBlockComponent extends CaptionedBlockComponent<BookmarkBloc
     ) {
       // When the doc is readonly, and the preview data not provided
       // We should fetch the preview data and update the local link preview data
-      if (this.doc.readonly) {
+      if (this.store.readonly) {
         this._updateLocalLinkPreview();
         return;
       }

blocksuite/affine/blocks/bookmark/src/components/bookmark-card.ts

@@ -61,7 +61,7 @@ export class BookmarkCard extends SignalWatcher(
 
     const theme = this.bookmark.std.get(ThemeProvider).theme;
     const { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme);
-    const imageProxyService = this.bookmark.doc.get(ImageProxyService);
+    const imageProxyService = this.bookmark.store.get(ImageProxyService);
 
     const titleIcon = this.loading
       ? LoadingIcon

blocksuite/affine/blocks/bookmark/src/configs/slash-menu.ts

@@ -26,7 +26,7 @@ const bookmarkSlashMenuConfig: SlashMenuConfig = {
         model.store.schema.flavourSchemaMap.has('affine:bookmark'),
       action: ({ std, model }) => {
         const { host } = std;
-        const parentModel = host.doc.getParent(model);
+        const parentModel = host.store.getParent(model);
         if (!parentModel) {
           return;
         }

blocksuite/affine/blocks/bookmark/src/utils.ts

@@ -15,7 +15,7 @@ export async function refreshBookmarkUrlData(
   try {
     bookmarkElement.loading = true;
 
-    const linkPreviewer = bookmarkElement.doc.get(LinkPreviewerService);
+    const linkPreviewer = bookmarkElement.store.get(LinkPreviewerService);
     const bookmarkUrlData = await linkPreviewer.query(
       bookmarkElement.model.props.url,
       signal
@@ -32,7 +32,7 @@ export async function refreshBookmarkUrlData(
 
     if (signal?.aborted) return;
 
-    bookmarkElement.doc.updateBlock(bookmarkElement.model, {
+    bookmarkElement.store.updateBlock(bookmarkElement.model, {
       title,
       description,
       icon,

blocksuite/affine/blocks/code/src/code-block.ts

@@ -68,7 +68,7 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
   }
 
   get readonly() {
-    return this.doc.readonly;
+    return this.store.readonly;
   }
 
   get langs() {
@@ -226,7 +226,7 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
         return;
       },
       Tab: ctx => {
-        if (this.doc.readonly) return;
+        if (this.store.readonly) return;
         const state = ctx.get('keyboardState');
         const event = state.raw;
         const inlineEditor = this.inlineEditor;
@@ -337,7 +337,7 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
         return;
       },
       Enter: () => {
-        this.doc.captureSync();
+        this.store.captureSync();
         return true;
       },
       'Mod-Enter': () => {
@@ -348,11 +348,16 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
         if (!inlineRange || !inlineEditor) return;
         const isEnd = model.props.text.length === inlineRange.index;
         if (!isEnd) return;
-        const parent = this.doc.getParent(model);
+        const parent = this.store.getParent(model);
         if (!parent) return;
         const index = parent.children.indexOf(model);
         if (index === -1) return;
-        const id = this.doc.addBlock('affine:paragraph', {}, parent, index + 1);
+        const id = this.store.addBlock(
+          'affine:paragraph',
+          {},
+          parent,
+          index + 1
+        );
         focusTextModel(std, id);
         return true;
       },
@@ -406,10 +411,10 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
           })}
           .yText=${this.model.props.text.yText}
           .inlineEventSource=${this.topContenteditableElement ?? nothing}
-          .undoManager=${this.doc.history}
+          .undoManager=${this.store.history}
           .attributesSchema=${this.inlineManager.getSchema()}
           .attributeRenderer=${this.inlineManager.getRenderer()}
-          .readonly=${this.doc.readonly}
+          .readonly=${this.store.readonly}
           .inlineRangeProvider=${this._inlineRangeProvider}
           .enableClipboard=${false}
           .enableUndoRedo=${false}
@@ -442,7 +447,7 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
   }
 
   setWrap(wrap: boolean) {
-    this.doc.updateBlock(this.model, { wrap });
+    this.store.updateBlock(this.model, { wrap });
   }
 
   @query('rich-text')

blocksuite/affine/blocks/code/src/code-toolbar/components/lang-button.ts

@@ -49,7 +49,7 @@ export class LanguageListButton extends WithDisposable(
   private _abortController?: AbortController;
 
   private readonly _clickLangBtn = () => {
-    if (this.blockComponent.doc.readonly) return;
+    if (this.blockComponent.store.readonly) return;
     if (this._abortController) {
       // Close the language list if it's already opened.
       this._abortController.abort();
@@ -71,7 +71,7 @@ export class LanguageListButton extends WithDisposable(
           sortedBundledLanguages.splice(index, 1);
           sortedBundledLanguages.unshift(item);
         }
-        this.blockComponent.doc.transact(() => {
+        this.blockComponent.store.transact(() => {
           this.blockComponent.model.props.language$.value = item.name;
         });
       },
@@ -134,10 +134,10 @@ export class LanguageListButton extends WithDisposable(
       </div>`}
       height="24px"
       @click=${this._clickLangBtn}
-      ?disabled=${this.blockComponent.doc.readonly}
+      ?disabled=${this.blockComponent.store.readonly}
     >
       <span class="lang-button-icon" slot="suffix">
-        ${!this.blockComponent.doc.readonly ? ArrowDownIcon : nothing}
+        ${!this.blockComponent.store.readonly ? ArrowDownIcon : nothing}
       </span>
     </icon-button> `;
   }

blocksuite/affine/blocks/code/src/code-toolbar/components/preview-button.ts

@@ -50,9 +50,9 @@ export class PreviewButton extends WithDisposable(SignalWatcher(LitElement)) {
   `;
 
   private readonly _toggle = (value: boolean) => {
-    if (this.blockComponent.doc.readonly) return;
+    if (this.blockComponent.store.readonly) return;
 
-    this.blockComponent.doc.updateBlock(this.blockComponent.model, {
+    this.blockComponent.store.updateBlock(this.blockComponent.model, {
       preview: value,
     });
   };

blocksuite/affine/blocks/code/src/code-toolbar/context.ts

@@ -8,7 +8,7 @@ export class CodeBlockToolbarContext extends MenuContext {
   };
 
   get doc() {
-    return this.blockComponent.doc;
+    return this.blockComponent.store;
   }
 
   get host() {

blocksuite/affine/blocks/data-view/src/configs/slash-menu.ts

@@ -26,16 +26,16 @@ export const dataViewSlashMenuConfig: SlashMenuConfig = {
 
       action: ({ model, std }) => {
         const { host } = std;
-        const parent = host.doc.getParent(model);
+        const parent = host.store.getParent(model);
         if (!parent) return;
         const index = parent.children.indexOf(model);
-        const id = host.doc.addBlock(
+        const id = host.store.addBlock(
           'affine:data-view',
           {},
-          host.doc.getParent(model),
+          host.store.getParent(model),
           index + 1
         );
-        const dataViewModel = host.doc.getBlock(id)!;
+        const dataViewModel = host.store.getBlock(id)!;
 
         const dataView = std.view.getBlock(
           dataViewModel.id

blocksuite/affine/blocks/data-view/src/data-source.ts

@@ -60,7 +60,7 @@ export class BlockQueryDataSource extends DataSourceBase {
   }
 
   get workspace() {
-    return this.host.doc.workspace;
+    return this.host.store.workspace;
   }
 
   constructor(

blocksuite/affine/blocks/data-view/src/data-view-block.ts

@@ -104,7 +104,7 @@ export class DataViewBlockComponent extends CaptionedBlockComponent<DataViewBloc
             prefix: CopyIcon,
             name: 'Copy',
             select: () => {
-              const slice = Slice.fromModels(this.doc, [this.model]);
+              const slice = Slice.fromModels(this.store, [this.model]);
               this.std.clipboard.copySlice(slice).catch(console.error);
             },
           }),
@@ -119,9 +119,9 @@ export class DataViewBlockComponent extends CaptionedBlockComponent<DataViewBloc
                 name: 'Delete Database',
                 select: () => {
                   this.model.children.slice().forEach(block => {
-                    this.doc.deleteBlock(block);
+                    this.store.deleteBlock(block);
                   });
-                  this.doc.deleteBlock(this.model);
+                  this.store.deleteBlock(this.model);
                 },
               }),
             ],
@@ -237,7 +237,7 @@ export class DataViewBlockComponent extends CaptionedBlockComponent<DataViewBloc
   }
 
   private renderDatabaseOps() {
-    if (this.doc.readonly) {
+    if (this.store.readonly) {
       return nothing;
     }
     return html` <div class="database-ops" @click="${this._clickDatabaseOps}">

blocksuite/affine/blocks/database/src/data-source.ts

@@ -568,20 +568,20 @@ export const convertToDatabase = (host: EditorHost, viewType: string) => {
   const firstModel = selectedModels?.[0];
   if (!firstModel) return;
 
-  host.doc.captureSync();
+  host.store.captureSync();
 
-  const parentModel = host.doc.getParent(firstModel);
+  const parentModel = host.store.getParent(firstModel);
   if (!parentModel) {
     return;
   }
 
-  const id = host.doc.addBlock(
+  const id = host.store.addBlock(
     'affine:database',
     {},
     parentModel,
     parentModel.children.indexOf(firstModel)
   );
-  const databaseModel = host.doc.getBlock(id)?.model as
+  const databaseModel = host.store.getBlock(id)?.model as
     | DatabaseBlockModel
     | undefined;
   if (!databaseModel) {
@@ -589,7 +589,7 @@ export const convertToDatabase = (host: EditorHost, viewType: string) => {
   }
   const datasource = new DatabaseBlockDataSource(databaseModel);
   datasource.viewManager.viewAdd(viewType);
-  host.doc.moveBlocks(selectedModels, databaseModel);
+  host.store.moveBlocks(selectedModels, databaseModel);
 
   const selectionManager = host.selection;
   selectionManager.clear();

blocksuite/affine/blocks/database/src/database-block.ts

@@ -120,7 +120,7 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
           prefix: CopyIcon(),
           name: 'Copy',
           select: () => {
-            const slice = Slice.fromModels(this.doc, [this.model]);
+            const slice = Slice.fromModels(this.store, [this.model]);
             this.std.clipboard
               .copySlice(slice)
               .then(() => {
@@ -139,9 +139,9 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
               name: 'Delete Database',
               select: () => {
                 this.model.children.slice().forEach(block => {
-                  this.doc.deleteBlock(block);
+                  this.store.deleteBlock(block);
                 });
-                this.doc.deleteBlock(this.model);
+                this.store.deleteBlock(this.model);
               },
             }),
           ],
@@ -258,18 +258,18 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
       );
       return () => {
         this.indicator.remove();
-        const model = this.doc.getBlock(id)?.model;
+        const model = this.store.getBlock(id)?.model;
         const target = result.modelState.model;
-        let parent = this.doc.getParent(target.id);
+        let parent = this.store.getParent(target.id);
         const shouldInsertIn = result.placement === 'in';
         if (shouldInsertIn) {
           parent = target;
         }
         if (model && target && parent) {
           if (shouldInsertIn) {
-            this.doc.moveBlocks([model], parent);
+            this.store.moveBlocks([model], parent);
           } else {
-            this.doc.moveBlocks(
+            this.store.moveBlocks(
               [model],
               parent,
               target,

blocksuite/affine/blocks/database/src/detail-panel/block-renderer.ts

@@ -74,7 +74,7 @@ export class BlockRenderer
   }
 
   get model() {
-    return this.host?.doc.getBlock(this.rowId)?.model;
+    return this.host?.store.getBlock(this.rowId)?.model;
   }
 
   override connectedCallback() {

blocksuite/affine/blocks/edgeless-text/src/edgeless-text-block.ts

@@ -44,7 +44,7 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
   `;
 
   private readonly _resizeObserver = new ResizeObserver(() => {
-    if (this.doc.readonly) {
+    if (this.store.readonly) {
       return;
     }
 
@@ -60,7 +60,7 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
     const rect = this._textContainer.getBoundingClientRect();
     bound.h = rect.height / this.gfx.viewport.zoom;
 
-    this.doc.updateBlock(this.model, {
+    this.store.updateBlock(this.model, {
       xywh: bound.serialize(),
     });
   }
@@ -73,7 +73,7 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
       EDGELESS_TEXT_BLOCK_MIN_WIDTH * this.gfx.viewport.zoom
     );
 
-    this.doc.updateBlock(this.model, {
+    this.store.updateBlock(this.model, {
       xywh: bound.serialize(),
     });
   }
@@ -169,7 +169,7 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
           !firstChild ||
           !matchModels(firstChild, [ListBlockModel, ParagraphBlockModel])
         ) {
-          newParagraphId = this.doc.addBlock(
+          newParagraphId = this.store.addBlock(
             'affine:paragraph',
             {},
             this.model.id,
@@ -182,7 +182,7 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
           !lastChild ||
           !matchModels(lastChild, [ListBlockModel, ParagraphBlockModel])
         ) {
-          newParagraphId = this.doc.addBlock(
+          newParagraphId = this.store.addBlock(
             'affine:paragraph',
             {},
             this.model.id
@@ -284,7 +284,7 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
           }
 
           if (this.model.children.length === 0) {
-            const blockId = this.doc.addBlock(
+            const blockId = this.store.addBlock(
               'affine:paragraph',
               { type: 'text' },
               this.model.id
@@ -339,7 +339,7 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
       minWidth: !hasMaxWidth ? '220px' : undefined,
     };
 
-    this.contentEditable = String(editing && !this.doc.readonly$.value);
+    this.contentEditable = String(editing && !this.store.readonly$.value);
 
     return html`
       <div

blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/configs/slash-menu.ts

@@ -25,7 +25,7 @@ const linkedDocSlashMenuConfig: SlashMenuConfig = {
       when: ({ model }) =>
         model.store.schema.flavourSchemaMap.has('affine:embed-linked-doc'),
       action: ({ std, model }) => {
-        const newDoc = createDefaultDoc(std.host.doc.workspace);
+        const newDoc = createDefaultDoc(std.host.store.workspace);
         insertContent(std, model, REFERENCE_NODE, {
           reference: {
             type: 'LinkedPage',

blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/embed-linked-doc-block.ts

@@ -49,7 +49,7 @@ import { styles } from './styles.js';
 import { getEmbedLinkedDocIcons } from './utils.js';
 
 @Peekable({
-  enableOn: ({ doc }: EmbedLinkedDocBlockComponent) => !doc.readonly,
+  enableOn: ({ store }: EmbedLinkedDocBlockComponent) => !store.readonly,
 })
 export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinkedDocModel> {
   static override styles = styles;
@@ -124,7 +124,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
   };
 
   private readonly _setDocUpdatedAt = () => {
-    const meta = this.doc.workspace.meta.getDocMeta(this.model.props.pageId);
+    const meta = this.store.workspace.meta.getDocMeta(this.model.props.pageId);
     if (meta) {
       const date = meta.updatedDate || meta.createDate;
       this._docUpdatedAt = new Date(date);
@@ -249,7 +249,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
   }
 
   get readonly() {
-    return this.doc.readonly;
+    return this.store.readonly;
   }
 
   get isCitation() {
@@ -504,7 +504,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
 
       this._setDocUpdatedAt();
       this.disposables.add(
-        this.doc.workspace.slots.docListUpdated.subscribe(() => {
+        this.store.workspace.slots.docListUpdated.subscribe(() => {
           this._setDocUpdatedAt();
         })
       );
@@ -563,8 +563,8 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
     if (linkedDoc && style === 'horizontalThin') {
       bound.w = EMBED_CARD_WIDTH.horizontal;
       bound.h = EMBED_CARD_HEIGHT.horizontal;
-      this.doc.withoutTransact(() => {
-        this.doc.updateBlock(this.model, {
+      this.store.withoutTransact(() => {
+        this.store.updateBlock(this.model, {
           xywh: bound.serialize(),
           style: 'horizontal',
         });
@@ -572,8 +572,8 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
     } else if (!linkedDoc && style === 'horizontal') {
       bound.w = EMBED_CARD_WIDTH.horizontalThin;
       bound.h = EMBED_CARD_HEIGHT.horizontalThin;
-      this.doc.withoutTransact(() => {
-        this.doc.updateBlock(this.model, {
+      this.store.withoutTransact(() => {
+        this.store.updateBlock(this.model, {
           xywh: bound.serialize(),
           style: 'horizontalThin',
         });

blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/embed-synced-doc-block.ts

@@ -48,7 +48,7 @@ import type { EmbedSyncedDocCard } from './components/embed-synced-doc-card.js';
 import { blockStyles } from './styles.js';
 
 @Peekable({
-  enableOn: ({ doc }: EmbedSyncedDocBlockComponent) => !doc.readonly,
+  enableOn: ({ store }: EmbedSyncedDocBlockComponent) => !store.readonly,
 })
 export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSyncedDocModel> {
   static override styles = blockStyles;
@@ -348,7 +348,7 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
 
   open = (event?: Partial<DocLinkClickedEvent>) => {
     const pageId = this.model.props.pageId;
-    if (pageId === this.doc.id) return;
+    if (pageId === this.store.id) return;
 
     this.std
       .getOptional(RefNodeSlotsProvider)
@@ -413,7 +413,7 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
     let editorHost: EditorHost | null = this.host;
     while (editorHost && !this._cycle) {
       this._cycle =
-        !!editorHost && editorHost.doc.id === this.model.props.pageId;
+        !!editorHost && editorHost.store.id === this.model.props.pageId;
       editorHost = editorHost.parentElement?.closest('editor-host') ?? null;
     }
   }
@@ -482,7 +482,7 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
   }
 
   private _setDocUpdatedAt() {
-    const meta = this.doc.workspace.meta.getDocMeta(this.model.props.pageId);
+    const meta = this.store.workspace.meta.getDocMeta(this.model.props.pageId);
     if (meta) {
       const date = meta.updatedDate || meta.createDate;
       this._docUpdatedAt = new Date(date);
@@ -518,7 +518,7 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
 
     this._setDocUpdatedAt();
     this.disposables.add(
-      this.doc.workspace.slots.docListUpdated.subscribe(() => {
+      this.store.workspace.slots.docListUpdated.subscribe(() => {
         this._setDocUpdatedAt();
       })
     );

blocksuite/affine/blocks/embed/src/common/insert-embed-card.ts

@@ -46,10 +46,10 @@ export function insertEmbedCard(
   if (blockId) {
     const block = host.view.getBlock(blockId);
     if (!block) return;
-    const parent = host.doc.getParent(block.model);
+    const parent = host.store.getParent(block.model);
     if (!parent) return;
     const index = parent.children.indexOf(block.model);
-    const cardId = host.doc.addBlock(
+    const cardId = host.store.addBlock(
       flavour as never,
       props,
       parent,

blocksuite/affine/blocks/embed/src/embed-figma-block/configs/slash-menu.ts

@@ -22,7 +22,7 @@ export const embedFigmaSlashMenuConfig: SlashMenuConfig = {
       action: ({ std, model }) => {
         (async () => {
           const { host } = std;
-          const parentModel = host.doc.getParent(model);
+          const parentModel = host.store.getParent(model);
           if (!parentModel) {
             return;
           }

blocksuite/affine/blocks/embed/src/embed-figma-block/embed-figma-block.ts

@@ -49,8 +49,8 @@ export class EmbedFigmaBlockComponent extends EmbedBlockComponent<EmbedFigmaMode
     this._cardStyle = this.model.props.style;
 
     if (!this.model.props.title) {
-      this.doc.withoutTransact(() => {
-        this.doc.updateBlock(this.model, {
+      this.store.withoutTransact(() => {
+        this.store.updateBlock(this.model, {
           title: 'Figma',
         });
       });

blocksuite/affine/blocks/embed/src/embed-github-block/configs/slash-menu.ts

@@ -22,7 +22,7 @@ export const embedGithubSlashMenuConfig: SlashMenuConfig = {
       action: ({ std, model }) => {
         (async () => {
           const { host } = std;
-          const parentModel = host.doc.getParent(model);
+          const parentModel = host.store.getParent(model);
           if (!parentModel) {
             return;
           }

blocksuite/affine/blocks/embed/src/embed-github-block/embed-github-block.ts

@@ -83,12 +83,12 @@ export class EmbedGithubBlockComponent extends EmbedBlockComponent<
       !this.model.props.repo ||
       !this.model.props.githubId
     ) {
-      this.doc.withoutTransact(() => {
+      this.store.withoutTransact(() => {
         const url = this.model.props.url;
         const urlMatch = url.match(githubUrlRegex);
         if (urlMatch) {
           const [, owner, repo, githubType, githubId] = urlMatch;
-          this.doc.updateBlock(this.model, {
+          this.store.updateBlock(this.model, {
             owner,
             repo,
             githubType: githubType === 'issue' ? 'issue' : 'pr',
@@ -98,7 +98,7 @@ export class EmbedGithubBlockComponent extends EmbedBlockComponent<
       });
     }
 
-    this.doc.withoutTransact(() => {
+    this.store.withoutTransact(() => {
       if (!this.model.props.description && !this.model.props.title) {
         this.refreshData();
       } else {
@@ -132,7 +132,7 @@ export class EmbedGithubBlockComponent extends EmbedBlockComponent<
 
     const loading = this.loading;
     const theme = this.std.get(ThemeProvider).theme;
-    const imageProxyService = this.doc.get(ImageProxyService);
+    const imageProxyService = this.store.get(ImageProxyService);
     const { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme);
     const titleIcon = loading ? LoadingIcon : GithubIcon;
     const statusIcon = status

blocksuite/affine/blocks/embed/src/embed-github-block/utils.ts

@@ -110,7 +110,7 @@ export async function refreshEmbedGithubUrlData(
 
     if (signal?.aborted) return;
 
-    embedGithubElement.doc.updateBlock(embedGithubElement.model, {
+    embedGithubElement.store.updateBlock(embedGithubElement.model, {
       image,
       status,
       statusReason,
@@ -144,7 +144,7 @@ export async function refreshEmbedGithubStatus(
 
   if (!githubApiData.status || signal?.aborted) return;
 
-  embedGithubElement.doc.updateBlock(embedGithubElement.model, {
+  embedGithubElement.store.updateBlock(embedGithubElement.model, {
     status: githubApiData.status,
     statusReason: githubApiData.statusReason,
     createdAt: githubApiData.createdAt,

blocksuite/affine/blocks/embed/src/embed-iframe-block/commands/insert-embed-iframe-with-url.ts

@@ -56,10 +56,10 @@ export const insertEmbedIframeWithUrlCommand: Command<
   if (selectedBlockId) {
     const block = host.view.getBlock(selectedBlockId);
     if (!block) return;
-    const parent = host.doc.getParent(block.model);
+    const parent = host.store.getParent(block.model);
     if (!parent) return;
     const index = parent.children.indexOf(block.model);
-    newBlockId = host.doc.addBlock(flavour, props, parent, index + 1);
+    newBlockId = host.store.addBlock(flavour, props, parent, index + 1);
   } else {
     // When there is no selected block and in edgeless mode
     // We should insert the embed iframe block to surface

blocksuite/affine/blocks/embed/src/embed-iframe-block/embed-iframe-block.ts

@@ -177,7 +177,7 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra
 
       // update model
       const iframeUrl = this._getIframeUrl(embedData) ?? currentIframeUrl;
-      this.doc.updateBlock(this.model, {
+      this.store.updateBlock(this.model, {
         iframeUrl,
         title: embedData?.title || previewData?.title,
         description: embedData?.description || previewData?.description,
@@ -373,7 +373,7 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra
 
     // if the iframe url is not set, refresh the data to get the iframe url
     if (!this.model.props.iframeUrl) {
-      this.doc.withoutTransact(() => {
+      this.store.withoutTransact(() => {
         this.refreshData().catch(console.error);
       });
     } else {
@@ -452,7 +452,7 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra
   };
 
   get readonly() {
-    return this.doc.readonly;
+    return this.store.readonly;
   }
 
   get selectionManager() {

blocksuite/affine/blocks/embed/src/embed-loom-block/configs/slash-menu.ts

@@ -22,7 +22,7 @@ export const embedLoomSlashMenuConfig: SlashMenuConfig = {
       action: ({ std, model }) => {
         (async () => {
           const { host } = std;
-          const parentModel = host.doc.getParent(model);
+          const parentModel = host.store.getParent(model);
           if (!parentModel) {
             return;
           }

blocksuite/affine/blocks/embed/src/embed-loom-block/embed-loom-block.ts

@@ -60,12 +60,12 @@ export class EmbedLoomBlockComponent extends EmbedBlockComponent<
     this._cardStyle = this.model.props.style;
 
     if (!this.model.props.videoId) {
-      this.doc.withoutTransact(() => {
+      this.store.withoutTransact(() => {
         const url = this.model.props.url;
         const urlMatch = url.match(loomUrlRegex);
         if (urlMatch) {
           const [, videoId] = urlMatch;
-          this.doc.updateBlock(this.model, {
+          this.store.updateBlock(this.model, {
             videoId,
           });
         }
@@ -73,7 +73,7 @@ export class EmbedLoomBlockComponent extends EmbedBlockComponent<
     }
 
     if (!this.model.props.description && !this.model.props.title) {
-      this.doc.withoutTransact(() => {
+      this.store.withoutTransact(() => {
         this.refreshData();
       });
     }
@@ -93,7 +93,7 @@ export class EmbedLoomBlockComponent extends EmbedBlockComponent<
 
     const loading = this.loading;
     const theme = this.std.get(ThemeProvider).theme;
-    const imageProxyService = this.doc.get(ImageProxyService);
+    const imageProxyService = this.store.get(ImageProxyService);
     const { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme);
     const titleIcon = loading ? LoadingIcon : LoomIcon;
     const titleText = loading ? 'Loading...' : title;

blocksuite/affine/blocks/embed/src/embed-loom-block/utils.ts

@@ -62,7 +62,7 @@ export async function refreshEmbedLoomUrlData(
 
     if (signal?.aborted) return;
 
-    embedLoomElement.doc.updateBlock(embedLoomElement.model, {
+    embedLoomElement.store.updateBlock(embedLoomElement.model, {
       title,
       description,
       image,

blocksuite/affine/blocks/embed/src/embed-youtube-block/configs/slash-menu.ts

@@ -22,7 +22,7 @@ export const embedYoutubeSlashMenuConfig: SlashMenuConfig = {
       action: ({ std, model }) => {
         (async () => {
           const { host } = std;
-          const parentModel = host.doc.getParent(model);
+          const parentModel = host.store.getParent(model);
           if (!parentModel) {
             return;
           }

blocksuite/affine/blocks/embed/src/embed-youtube-block/embed-youtube-block.ts

@@ -63,12 +63,12 @@ export class EmbedYoutubeBlockComponent extends EmbedBlockComponent<
     this._cardStyle = this.model.props.style;
 
     if (!this.model.props.videoId) {
-      this.doc.withoutTransact(() => {
+      this.store.withoutTransact(() => {
         const url = this.model.props.url;
         const urlMatch = url.match(youtubeUrlRegex);
         if (urlMatch) {
           const [, videoId] = urlMatch;
-          this.doc.updateBlock(this.model, {
+          this.store.updateBlock(this.model, {
             videoId,
           });
         }
@@ -76,7 +76,7 @@ export class EmbedYoutubeBlockComponent extends EmbedBlockComponent<
     }
 
     if (!this.model.props.description && !this.model.props.title) {
-      this.doc.withoutTransact(() => {
+      this.store.withoutTransact(() => {
         this.refreshData();
       });
     }
@@ -107,7 +107,7 @@ export class EmbedYoutubeBlockComponent extends EmbedBlockComponent<
 
     const loading = this.loading;
     const theme = this.std.get(ThemeProvider).theme;
-    const imageProxyService = this.doc.get(ImageProxyService);
+    const imageProxyService = this.store.get(ImageProxyService);
     const { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme);
     const titleIcon = loading ? LoadingIcon : YoutubeIcon;
     const titleText = loading ? 'Loading...' : title;

blocksuite/affine/blocks/embed/src/embed-youtube-block/utils.ts

@@ -97,7 +97,7 @@ export async function refreshEmbedYoutubeUrlData(
 
     if (signal?.aborted) return;
 
-    embedYoutubeElement.doc.updateBlock(embedYoutubeElement.model, {
+    embedYoutubeElement.store.updateBlock(embedYoutubeElement.model, {
       image,
       title,
       description,

blocksuite/affine/blocks/frame/src/edgeless-toolbar/presentation-toolbar.ts

@@ -176,7 +176,7 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin(
   private _exitPresentation() {
     // When exit presentation mode, we need to set the tool to default or pan
     // And exit fullscreen
-    if (this.edgeless.doc.readonly) {
+    if (this.edgeless.store.readonly) {
       this.setEdgelessTool(PanTool, { panning: false });
     } else {
       this.setEdgelessTool(DefaultTool);
@@ -316,7 +316,7 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin(
           this.edgelessTool.toolType === PresentTool &&
           this._fullScreenMode
         ) {
-          if (this.edgeless.doc.readonly) {
+          if (this.edgeless.store.readonly) {
             this.setEdgelessTool(PanTool, { panning: false });
           } else {
             this.setEdgelessTool(DefaultTool);

blocksuite/affine/blocks/frame/src/edgeless-toolbar/quick-tool.ts

@@ -10,7 +10,7 @@ export const frameQuickTool = QuickToolExtension('frame', ({ block, gfx }) => {
       .edgeless=${block}
     ></edgeless-frame-tool-button>`,
     menu: buildFrameDenseMenu(block, gfx),
-    enable: !block.doc.readonly,
+    enable: !block.store.readonly,
     priority: 90,
   };
 });

blocksuite/affine/blocks/frame/src/frame-block.ts

@@ -13,7 +13,7 @@ export class FrameBlockComponent extends GfxBlockComponent<FrameBlockModel> {
     super.connectedCallback();
 
     this._disposables.add(
-      this.doc.slots.blockUpdated.subscribe(({ type, id }) => {
+      this.store.slots.blockUpdated.subscribe(({ type, id }) => {
         if (id === this.model.id && type === 'update') {
           this.requestUpdate();
         }

blocksuite/affine/blocks/frame/src/present/frame-order-button.ts

@@ -38,7 +38,7 @@ export class EdgelessFrameOrderButton extends WithDisposable(LitElement) {
   }
 
   protected override render() {
-    const { readonly } = this.edgeless.doc;
+    const { readonly } = this.edgeless.store;
     return html`
       <style>
         .edgeless-frame-order-button svg {

blocksuite/affine/blocks/frame/src/present/frame-order-menu.ts

@@ -193,7 +193,7 @@ export class EdgelessFrameOrderMenu extends SignalWatcher(
           this.crud.updateElement(frame.id, {
             presentationIndex: generateKeyBetweenV2(before, after),
           });
-          this.edgeless.doc.captureSync();
+          this.edgeless.store.captureSync();
 
           this.requestUpdate();
         }

blocksuite/affine/blocks/image/src/components/page-image-block.ts

@@ -65,7 +65,7 @@ export class ImageBlockPageComponent extends WithDisposable(ShadowlessElement) {
   private _isDragging = false;
 
   private get _doc() {
-    return this.block.doc;
+    return this.block.store;
   }
 
   private get _host() {
@@ -128,21 +128,21 @@ export class ImageBlockPageComponent extends WithDisposable(ShadowlessElement) {
         return true;
       },
       Delete: ctx => {
-        if (this._host.doc.readonly || !this._isSelected) return;
+        if (this._host.store.readonly || !this._isSelected) return;
 
         addParagraph(ctx);
         this._doc.deleteBlock(this._model);
         return true;
       },
       Backspace: ctx => {
-        if (this._host.doc.readonly || !this._isSelected) return;
+        if (this._host.store.readonly || !this._isSelected) return;
 
         addParagraph(ctx);
         this._doc.deleteBlock(this._model);
         return true;
       },
       Enter: ctx => {
-        if (this._host.doc.readonly || !this._isSelected) return;
+        if (this._host.store.readonly || !this._isSelected) return;
 
         addParagraph(ctx);
         return true;

blocksuite/affine/blocks/image/src/utils.ts

@@ -108,7 +108,7 @@ export async function resetImageSize(
   const xywh = bound.serialize();
   const props: Partial<ImageBlockProps> = { ...imageSize, xywh };
 
-  block.doc.updateBlock(model, props);
+  block.store.updateBlock(model, props);
 }
 
 function convertToPng(blob: Blob): Promise<Blob | null> {
@@ -193,7 +193,7 @@ export async function copyImageBlob(
 export async function turnImageIntoCardView(
   block: ImageBlockComponent | ImageEdgelessBlockComponent
 ) {
-  const doc = block.doc;
+  const doc = block.store;
   if (!doc.schema.flavourSchemaMap.has('affine:attachment')) {
     console.error('The attachment flavour is not supported!');
     return;

blocksuite/affine/blocks/latex/src/latex-block.ts

@@ -77,7 +77,7 @@ export class LatexBlockComponent extends CaptionedBlockComponent<LatexBlockModel
 
     this.disposables.addFromEvent(this, 'click', () => {
       // should not open editor or select block in readonly mode
-      if (this.doc.readonly) {
+      if (this.store.readonly) {
         return;
       }
 

blocksuite/affine/blocks/list/src/commands/convert-to-numbered-list.ts

@@ -13,12 +13,12 @@ export const convertToNumberedListCommand: Command<
 > = (ctx, next) => {
   const { std, id, order, stopCapturing = true } = ctx;
   const host = std.host as EditorHost;
-  const doc = host.doc;
+  const doc = host.store;
 
   const model = doc.getBlock(id)?.model;
   if (!model || !model.text) return;
 
-  if (stopCapturing) host.doc.captureSync();
+  if (stopCapturing) host.store.captureSync();
 
   const listConvertedId = toNumberedList(std, model, order);
 

blocksuite/affine/blocks/list/src/commands/split-list.ts

@@ -15,7 +15,7 @@ export const splitListCommand: Command<{
 }> = (ctx, next) => {
   const { blockId, inlineIndex, std } = ctx;
   const host = std.host as EditorHost;
-  const doc = host.doc;
+  const doc = host.store;
 
   const model = doc.getBlock(blockId)?.model;
   if (!model || !matchModels(model, [ListBlockModel])) {

blocksuite/affine/blocks/list/src/list-block.ts

@@ -39,22 +39,22 @@ export class ListBlockComponent extends CaptionedBlockComponent<ListBlockModel>
     e.preventDefault();
 
     if (this.model.props.type === 'toggle') {
-      if (this.doc.readonly) {
+      if (this.store.readonly) {
         this._readonlyCollapsed = !this._readonlyCollapsed;
       } else {
-        this.doc.captureSync();
-        this.doc.updateBlock(this.model, {
+        this.store.captureSync();
+        this.store.updateBlock(this.model, {
           collapsed: !this.model.props.collapsed,
         });
       }
 
       return;
     } else if (this.model.props.type === 'todo') {
-      if (this.doc.readonly) return;
+      if (this.store.readonly) return;
 
-      this.doc.captureSync();
+      this.store.captureSync();
       const checkedPropObj = { checked: !this.model.props.checked };
-      this.doc.updateBlock(this.model, checkedPropObj);
+      this.store.updateBlock(this.model, checkedPropObj);
       if (this.model.props.checked) {
         const checkEl = this.querySelector('.affine-list-block__todo-prefix');
         if (checkEl) {
@@ -120,7 +120,7 @@ export class ListBlockComponent extends CaptionedBlockComponent<ListBlockModel>
         const order = this.model.props.order$.value;
         // old numbered list has no order
         if (type === 'numbered' && !Number.isInteger(order)) {
-          correctNumberedListsOrderToPrev(this.doc, this.model, false);
+          correctNumberedListsOrderToPrev(this.store, this.model, false);
         }
         // if list is not numbered, order should be null
         if (type !== 'numbered' && order !== null) {
@@ -138,7 +138,7 @@ export class ListBlockComponent extends CaptionedBlockComponent<ListBlockModel>
 
   override renderBlock(): TemplateResult<1> {
     const { model, _onClickIcon } = this;
-    const collapsed = this.doc.readonly
+    const collapsed = this.store.readonly
       ? this._readonlyCollapsed
       : model.props.collapsed;
 
@@ -169,11 +169,11 @@ export class ListBlockComponent extends CaptionedBlockComponent<ListBlockModel>
                 <blocksuite-toggle-button
                   .collapsed=${collapsed}
                   .updateCollapsed=${(value: boolean) => {
-                    if (this.doc.readonly) {
+                    if (this.store.readonly) {
                       this._readonlyCollapsed = value;
                     } else {
-                      this.doc.captureSync();
-                      this.doc.updateBlock(this.model, {
+                      this.store.captureSync();
+                      this.store.updateBlock(this.model, {
                         collapsed: value,
                       });
                     }
@@ -185,12 +185,12 @@ export class ListBlockComponent extends CaptionedBlockComponent<ListBlockModel>
           <rich-text
             .yText=${this.model.props.text.yText}
             .inlineEventSource=${this.topContenteditableElement ?? nothing}
-            .undoManager=${this.doc.history}
+            .undoManager=${this.store.history}
             .attributeRenderer=${this.attributeRenderer}
             .attributesSchema=${this.attributesSchema}
             .markdownMatches=${this.inlineManager?.markdownMatches}
             .embedChecker=${this.embedChecker}
-            .readonly=${this.doc.readonly}
+            .readonly=${this.store.readonly}
             .inlineRangeProvider=${this._inlineRangeProvider}
             .enableClipboard=${false}
             .enableUndoRedo=${false}

blocksuite/affine/blocks/note/src/commands/block-type.ts

@@ -68,7 +68,7 @@ export const updateBlockType: Command<
 
   const blockModels = selectedBlocks.map(ele => ele.model);
 
-  const hasSameDoc = selectedBlocks.every(block => block.doc === doc);
+  const hasSameDoc = selectedBlocks.every(block => block.store === doc);
   if (!hasSameDoc) {
     // doc check
     console.error(

blocksuite/affine/blocks/note/src/components/edgeless-note-background.ts

@@ -66,7 +66,7 @@ export class EdgelessNoteBackground extends SignalWatcher(
   }
 
   get doc() {
-    return this.std.host.doc;
+    return this.std.host.store;
   }
 
   private _tryAddParagraph(x: number, y: number) {
@@ -137,7 +137,7 @@ export class EdgelessNoteBackground extends SignalWatcher(
     const y = clamp(e.y, rect.top + offsetY, rect.bottom - offsetY);
     handleNativeRangeAtPoint(x, y);
 
-    if (this.std.host.doc.readonly) return;
+    if (this.std.host.store.readonly) return;
 
     this._tryAddParagraph(x, y);
   }

blocksuite/affine/blocks/note/src/note-edgeless-block.ts

@@ -298,7 +298,7 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
               .note=${this.model}
             ></edgeless-page-block-title>
             <div
-              contenteditable=${String(!this.doc.readonly$.value)}
+              contenteditable=${String(!this.store.readonly$.value)}
               class="edgeless-note-page-content"
             >
               ${this.renderPageContent()}
@@ -362,7 +362,7 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
           }
 
           if (this.model.children.length === 0) {
-            const blockId = this.doc.addBlock(
+            const blockId = this.store.addBlock(
               'affine:paragraph',
               { type: 'text' },
               this.model.id

blocksuite/affine/blocks/paragraph/src/paragraph-block.ts

@@ -125,7 +125,7 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
     this.disposables.add(
       effect(() => {
         const composing = this._composing.value;
-        if (composing || this.doc.readonly) {
+        if (composing || this.store.readonly) {
           this._displayPlaceholder.value = false;
           return;
         }
@@ -197,7 +197,7 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
             nearestHeading &&
             nearestHeading.props.type.startsWith('h') &&
             nearestHeading.props.collapsed &&
-            !this.doc.readonly
+            !this.store.readonly
           ) {
             nearestHeading.props.collapsed = false;
           }
@@ -215,7 +215,7 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
 
   override renderBlock(): TemplateResult<1> {
     const { type$ } = this.model.props;
-    const collapsed = this.doc.readonly
+    const collapsed = this.store.readonly
       ? this._readonlyCollapsed
       : this.model.props.collapsed;
     const collapsedSiblings = this.collapsedSiblings;
@@ -278,11 +278,11 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
                 <blocksuite-toggle-button
                   .collapsed=${collapsed}
                   .updateCollapsed=${(value: boolean) => {
-                    if (this.doc.readonly) {
+                    if (this.store.readonly) {
                       this._readonlyCollapsed = value;
                     } else {
-                      this.doc.captureSync();
-                      this.doc.updateBlock(this.model, {
+                      this.store.captureSync();
+                      this.store.updateBlock(this.model, {
                         collapsed: value,
                       });
                     }
@@ -293,12 +293,12 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
           <rich-text
             .yText=${this.model.props.text.yText}
             .inlineEventSource=${this.topContenteditableElement ?? nothing}
-            .undoManager=${this.doc.history}
+            .undoManager=${this.store.history}
             .attributesSchema=${this.attributesSchema}
             .attributeRenderer=${this.attributeRenderer}
             .markdownMatches=${this.inlineManager?.markdownMatches}
             .embedChecker=${this.embedChecker}
-            .readonly=${this.doc.readonly}
+            .readonly=${this.store.readonly}
             .inlineRangeProvider=${this._inlineRangeProvider}
             .enableClipboard=${false}
             .enableUndoRedo=${false}

blocksuite/affine/blocks/root/src/edgeless/components/auto-complete/auto-complete-panel.ts

@@ -174,7 +174,7 @@ export class EdgelessAutoCompletePanel extends WithDisposable(LitElement) {
       presentationIndex: frameMgr.generatePresentationIndex(),
     });
     const id = this.crud.addBlock('affine:frame', props, surfaceBlockModel);
-    edgeless.doc.captureSync();
+    edgeless.store.captureSync();
     const frame = this.crud.getElementById(id);
     if (!frame) return;
 
@@ -190,7 +190,7 @@ export class EdgelessAutoCompletePanel extends WithDisposable(LitElement) {
   }
 
   private _addNote() {
-    const { doc } = this.edgeless;
+    const { store } = this.edgeless;
     const target = this._getTargetXYWH(
       DEFAULT_NOTE_WIDTH,
       DEFAULT_NOTE_OVERLAY_HEIGHT
@@ -203,13 +203,13 @@ export class EdgelessAutoCompletePanel extends WithDisposable(LitElement) {
       {
         xywh: serializeXYWH(...xywh),
       },
-      doc.root?.id
+      store.root?.id
     );
-    const note = doc.getBlock(id)?.model;
+    const note = store.getBlock(id)?.model;
     if (!matchModels(note, [NoteBlockModel])) {
       return;
     }
-    doc.addBlock('affine:paragraph', { type: 'text' }, id);
+    store.addBlock('affine:paragraph', { type: 'text' }, id);
     const group = this.currentSource.group;
 
     if (group instanceof GroupElementModel) {
@@ -251,7 +251,7 @@ export class EdgelessAutoCompletePanel extends WithDisposable(LitElement) {
       elements: [id],
       editing: true,
     });
-    edgeless.doc.captureSync();
+    edgeless.store.captureSync();
   }
 
   private _addText() {
@@ -260,7 +260,7 @@ export class EdgelessAutoCompletePanel extends WithDisposable(LitElement) {
     const { xywh, position } = target;
     const bound = Bound.fromXYWH(xywh);
 
-    const textFlag = this.edgeless.doc
+    const textFlag = this.edgeless.store
       .get(FeatureFlagService)
       .getFlag('enable_edgeless_text');
     if (textFlag) {
@@ -287,7 +287,7 @@ export class EdgelessAutoCompletePanel extends WithDisposable(LitElement) {
         elements: [textId],
         editing: false,
       });
-      this.edgeless.doc.captureSync();
+      this.edgeless.store.captureSync();
     } else {
       const textId = this.crud.addElement(CanvasElementType.TEXT, {
         xywh: bound.serialize(),
@@ -316,7 +316,7 @@ export class EdgelessAutoCompletePanel extends WithDisposable(LitElement) {
         elements: [textId],
         editing: false,
       });
-      this.edgeless.doc.captureSync();
+      this.edgeless.store.captureSync();
 
       mountTextElementEditor(textElement, this.edgeless);
     }

blocksuite/affine/blocks/root/src/edgeless/components/auto-complete/edgeless-auto-complete.ts

@@ -371,7 +371,7 @@ export class EdgelessAutoComplete extends WithDisposable(LitElement) {
   }
 
   private _generateElementOnClick(type: Direction) {
-    const { doc } = this.edgeless;
+    const { store } = this.edgeless;
     const bound = this._computeNextBound(type);
     const id = createEdgelessElement(this.edgeless, this.current, bound);
     if (!id) return;
@@ -393,7 +393,7 @@ export class EdgelessAutoComplete extends WithDisposable(LitElement) {
         this.edgeless
       );
     } else {
-      const model = doc.getModelById(id);
+      const model = store.getModelById(id);
       if (!model) {
         return;
       }

blocksuite/affine/blocks/root/src/edgeless/components/auto-complete/utils.ts

@@ -288,8 +288,8 @@ export function createEdgelessElement(
     if (!id) return null;
     element = crud.getElementById(id);
   } else {
-    const { doc } = edgeless;
-    id = doc.addBlock(
+    const { store } = edgeless;
+    id = store.addBlock(
       'affine:note',
       {
         background: current.props.background,
@@ -299,7 +299,7 @@ export function createEdgelessElement(
       },
       edgeless.model.id
     );
-    const note = doc.getBlock(id)?.model;
+    const note = store.getBlock(id)?.model;
     if (!note) {
       throw new BlockSuiteError(
         ErrorCode.GfxBlockElementError,
@@ -307,10 +307,10 @@ export function createEdgelessElement(
       );
     }
     assertType<NoteBlockModel>(note);
-    doc.updateBlock(note, () => {
+    store.updateBlock(note, () => {
       note.props.edgeless.collapse = true;
     });
-    doc.addBlock('affine:paragraph', {}, note.id);
+    store.addBlock('affine:paragraph', {}, note.id);
 
     element = note;
   }

blocksuite/affine/blocks/root/src/edgeless/components/note-slicer/index.ts

@@ -152,7 +152,7 @@ export class NoteSlicer extends WidgetComponent<RootBlockModel> {
 
   private _sliceNote() {
     if (!this._anchorNote || !this._noteBlockIds.length) return;
-    const doc = this.doc;
+    const doc = this.store;
 
     const {
       index: originalIndex,
@@ -177,7 +177,7 @@ export class NoteSlicer extends WidgetComponent<RootBlockModel> {
     const sliceVerticalPos =
       this._divingLinePositions[this._activeSlicerIndex].y;
     const newY = this.gfx.viewport.toModelCoord(x, sliceVerticalPos)[1];
-    const newNoteId = this.doc.addBlock(
+    const newNoteId = this.store.addBlock(
       'affine:note',
       {
         background,
@@ -364,7 +364,7 @@ export class NoteSlicer extends WidgetComponent<RootBlockModel> {
 
   override render() {
     if (
-      this.doc.readonly ||
+      this.store.readonly ||
       this._hidden ||
       this._isResizing ||
       !this._anchorNote ||

blocksuite/affine/blocks/root/src/edgeless/components/rects/edgeless-selected-rect.ts

@@ -477,7 +477,7 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<
   private readonly _onDragEnd = () => {
     this.slots.dragEnd.next();
 
-    this.doc.transact(() => {
+    this.store.transact(() => {
       this._dragEndCallback.forEach(cb => cb());
     });
 
@@ -1210,7 +1210,7 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<
     this._isHeightLimit = bound.h === NOTE_MIN_HEIGHT * scale;
 
     if (bound.h > NOTE_MIN_HEIGHT * scale) {
-      this.doc.updateBlock(element, () => {
+      this.store.updateBlock(element, () => {
         element.props.edgeless.collapse = true;
         element.props.edgeless.collapsedHeight = bound.h / scale;
       });
@@ -1393,7 +1393,7 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<
     }
 
     _disposables.add(
-      this.doc.slots.blockUpdated.subscribe(this._updateOnElementChange)
+      this.store.slots.blockUpdated.subscribe(this._updateOnElementChange)
     );
 
     _disposables.add(
@@ -1464,14 +1464,14 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<
     const {
       block,
       gfx,
-      doc,
+      store,
       resizeMode,
       _resizeManager,
       _selectedRect,
       _updateCursor,
     } = this;
 
-    const hasResizeHandles = !selection.editing && !doc.readonly;
+    const hasResizeHandles = !selection.editing && !store.readonly;
     const inoperable = selection.inoperable;
     const hasElementLocked = elements.some(element => element.isLocked());
     const handlers = [];
@@ -1578,7 +1578,7 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<
         }
       </style>
 
-      ${!doc.readonly && !inoperable && this._canAutoComplete()
+      ${!store.readonly && !inoperable && this._canAutoComplete()
         ? html`<edgeless-auto-complete
             .current=${this.selection.selectedElements[0]}
             .edgeless=${block}

blocksuite/affine/blocks/root/src/edgeless/configs/toolbar/render-linked-doc.ts

@@ -52,8 +52,8 @@ export function createLinkedDocFromEdgelessElements(
   elements: GfxModel[],
   docTitle?: string
 ) {
-  const _doc = host.doc.workspace.createDoc();
-  const transformer = host.doc.getTransformer();
+  const _doc = host.store.workspace.createDoc();
+  const transformer = host.store.getTransformer();
   const linkedDoc = _doc.getStore();
   linkedDoc.load(() => {
     const rootId = linkedDoc.addBlock('affine:page', {

blocksuite/affine/blocks/root/src/edgeless/edgeless-keyboard.ts

@@ -465,7 +465,7 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
           !event.metaKey
         ) {
           const elements = selection.selectedElements;
-          const doc = this.rootComponent.doc;
+          const doc = this.rootComponent.store;
 
           if (isSingleMindMapNode(elements)) {
             const target = gfx.getElementById(

blocksuite/affine/blocks/root/src/edgeless/edgeless-root-block.ts

@@ -407,7 +407,7 @@ export class EdgelessRootBlockComponent extends BlockComponent<
               elements[0].id
             ) as ShapeElementModel;
             if (target.text) {
-              this.doc.transact(() => {
+              this.store.transact(() => {
                 target.text!.delete(0, target.text!.length);
                 target.text!.insert(0, key);
               });
@@ -467,7 +467,7 @@ export class EdgelessRootBlockComponent extends BlockComponent<
     this._initPanEvent();
     this._initPinchEvent();
 
-    if (this.doc.readonly) {
+    if (this.store.readonly) {
       this.gfx.tool.setTool(PanTool, { panning: true });
     } else {
       this.gfx.tool.setTool(DefaultTool);

blocksuite/affine/blocks/root/src/edgeless/utils/crud.ts

@@ -25,10 +25,10 @@ export function deleteElements(
 
   set.forEach(element => {
     if (isNoteBlock(element)) {
-      const children = edgeless.doc.root?.children ?? [];
+      const children = edgeless.store.root?.children ?? [];
       // FIXME: should always keep at least 1 note
       if (children.length > 1) {
-        edgeless.doc.deleteBlock(element);
+        edgeless.store.deleteBlock(element);
       }
     } else {
       service.removeElement(element.id);

blocksuite/affine/blocks/root/src/keyboard/keyboard-manager.ts

@@ -74,7 +74,7 @@ export class PageKeyboardManager {
   }
 
   private get _doc() {
-    return this.rootComponent.doc;
+    return this.rootComponent.store;
   }
 
   private get _selection() {
@@ -143,7 +143,7 @@ export class PageKeyboardManager {
       return;
     }
 
-    const doc = rootComponent.host.doc;
+    const doc = rootComponent.host.store;
     const autofill = getTitleFromSelectedModels(
       selectedModels.map(toDraftModel)
     );

blocksuite/affine/blocks/root/src/page/page-root-block.ts

@@ -117,7 +117,7 @@ export class PageRootBlockComponent extends BlockComponent<RootBlockModel> {
       focusTextModel(this.std, firstText.id);
       return { id: firstText.id, created: false };
     } else {
-      const newFirstParagraphId = this.doc.addBlock(
+      const newFirstParagraphId = this.store.addBlock(
         'affine:paragraph',
         {},
         defaultNote,
@@ -131,7 +131,7 @@ export class PageRootBlockComponent extends BlockComponent<RootBlockModel> {
   keyboardManager: PageKeyboardManager | null = null;
 
   prependParagraphWithText = (text: Text) => {
-    const newFirstParagraphId = this.doc.addBlock(
+    const newFirstParagraphId = this.store.addBlock(
       'affine:paragraph',
       { text },
       this._getDefaultNoteBlock(),
@@ -157,16 +157,17 @@ export class PageRootBlockComponent extends BlockComponent<RootBlockModel> {
   }
 
   private _createDefaultNoteBlock() {
-    const { doc } = this;
+    const { store } = this;
 
-    const noteId = doc.addBlock('affine:note', {}, doc.root?.id);
-    return doc.getModelById(noteId) as NoteBlockModel;
+    const noteId = store.addBlock('affine:note', {}, store.root?.id);
+    return store.getModelById(noteId) as NoteBlockModel;
   }
 
   private _getDefaultNoteBlock() {
     return (
-      this.doc.root?.children.find(child => child.flavour === 'affine:note') ??
-      this._createDefaultNoteBlock()
+      this.store.root?.children.find(
+        child => child.flavour === 'affine:note'
+      ) ?? this._createDefaultNoteBlock()
     );
   }
 
@@ -230,16 +231,16 @@ export class PageRootBlockComponent extends BlockComponent<RootBlockModel> {
         );
         if (!sel) return;
         let model: BlockModel | null = null;
-        let current = this.doc.getModelById(sel.blockId);
+        let current = this.store.getModelById(sel.blockId);
         while (current && !model) {
           if (current.flavour === 'affine:note') {
             model = current;
           } else {
-            current = this.doc.getParent(current);
+            current = this.store.getParent(current);
           }
         }
         if (!model) return;
-        const prevNote = this.doc.getPrev(model);
+        const prevNote = this.store.getPrev(model);
         if (!prevNote || prevNote.flavour !== 'affine:note') {
           const isFirstText = sel.is(TextSelection) && sel.start.index === 0;
           const isBlock = sel.is(BlockSelection);
@@ -248,7 +249,7 @@ export class PageRootBlockComponent extends BlockComponent<RootBlockModel> {
           }
           return;
         }
-        const notes = this.doc.getModelsByFlavour('affine:note');
+        const notes = this.store.getModelsByFlavour('affine:note');
         const index = notes.indexOf(prevNote);
         if (index !== 0) return;
 
@@ -409,7 +410,7 @@ export class PageRootBlockComponent extends BlockComponent<RootBlockModel> {
       return !(isNote && displayOnEdgeless);
     });
 
-    this.contentEditable = String(!this.doc.readonly$.value);
+    this.contentEditable = String(!this.store.readonly$.value);
 
     return html`
       <div class="affine-page-root-block-container">${children} ${widgets}</div>

blocksuite/affine/blocks/surface-ref/src/surface-ref-block.ts

@@ -146,14 +146,14 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
   private _initHotkey() {
     const selection = this.host.selection;
     const addParagraph = () => {
-      if (!this.doc.getParent(this.model)) return;
+      if (!this.store.getParent(this.model)) return;
 
-      const [paragraphId] = this.doc.addSiblingBlocks(this.model, [
+      const [paragraphId] = this.store.addSiblingBlocks(this.model, [
         {
           flavour: 'affine:paragraph',
         },
       ]);
-      const model = this.doc.getModelById(paragraphId);
+      const model = this.store.getModelById(paragraphId);
       if (!model) return;
 
       requestConnectedFrame(() => {
@@ -185,7 +185,7 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
 
   private _initReferencedModel() {
     const findReferencedModel = (): [GfxModel | null, string] => {
-      if (!this.model.props.reference) return [null, this.doc.id];
+      if (!this.model.props.reference) return [null, this.store.id];
       const referenceId = this.model.props.reference;
 
       const find = (doc: Store): [GfxModel | null, string] => {
@@ -203,7 +203,7 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
       };
 
       // find current doc first
-      let result = find(this.doc);
+      let result = find(this.store);
       if (result[0]) return result;
 
       for (const doc of this.std.workspace.docs.values()) {
@@ -211,7 +211,7 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
         if (result[0]) return result;
       }
 
-      return [null, this.doc.id];
+      return [null, this.store.id];
     };
 
     const init = () => {
@@ -220,7 +220,7 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
       this._referencedModel =
         referencedModel && referencedModel.xywh ? referencedModel : null;
       // TODO(@L-Sun): clear query cache
-      const doc = this.doc.workspace.getDoc(docId);
+      const doc = this.store.workspace.getDoc(docId);
       this._previewDoc = doc?.getStore({ readonly: true }) ?? null;
     };
 
@@ -249,7 +249,7 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
 
     if (this._referencedModel instanceof GfxBlockElementModel) {
       this._disposables.add(
-        this.doc.slots.blockUpdated.subscribe(({ type, id }) => {
+        this.store.slots.blockUpdated.subscribe(({ type, id }) => {
           if (type === 'delete' && id === this.model.props.reference) {
             init();
           }

blocksuite/affine/blocks/surface/src/extensions/export-manager/export-manager.ts

@@ -542,7 +542,7 @@ type RootBlockComponent = BlockComponent & {
 function getRootByEditorHost(
   editorHost: EditorHost
 ): RootBlockComponent | null {
-  const model = editorHost.doc.root;
+  const model = editorHost.store.root;
   if (!model) return null;
   const root = editorHost.view.getBlock(model.id);
   return root as RootBlockComponent | null;