refactor(editor): use add and delete impl move block

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

## Summary by CodeRabbit

- **New Features**
  - Improved resource management by introducing explicit cleanup for various middleware components, ensuring that resources are properly released when no longer needed.

- **Refactor**
  - Updated middleware logic to support cleanup functions, enhancing the stability and performance of the application by preventing potential memory leaks.

- **Chores**
  - Enhanced lifecycle management in core systems to automatically dispose of resources when appropriate.

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

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

@@ -13,7 +13,6 @@ import {
   ActionPlacement,
   DocDisplayMetaProvider,
   EditorSettingProvider,
-  FeatureFlagService,
   type LinkEventType,
   type OpenDocMode,
   type ToolbarAction,
@@ -216,12 +215,7 @@ const conversionsActionGroup = {
       run(ctx) {
         const block = ctx.getCurrentBlockByType(EmbedLinkedDocBlockComponent);
 
-        if (
-          ctx.std
-            .get(FeatureFlagService)
-            .getFlag('enable_embed_doc_with_alias') &&
-          isGfxBlockComponent(block)
-        ) {
+        if (isGfxBlockComponent(block)) {
           const editorSetting = ctx.std.getOptional(EditorSettingProvider);
           editorSetting?.set?.(
             'docCanvasPreferView',

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

@@ -17,7 +17,6 @@ import { REFERENCE_NODE } from '@blocksuite/affine-shared/consts';
 import {
   ActionPlacement,
   EditorSettingProvider,
-  FeatureFlagService,
   type LinkEventType,
   type OpenDocMode,
   type ToolbarAction,
@@ -163,12 +162,7 @@ const conversionsActionGroup = {
       label: 'Card view',
       run(ctx) {
         const block = ctx.getCurrentBlockByType(EmbedSyncedDocBlockComponent);
-        if (
-          ctx.std
-            .get(FeatureFlagService)
-            .getFlag('enable_embed_doc_with_alias') &&
-          isGfxBlockComponent(block)
-        ) {
+        if (isGfxBlockComponent(block)) {
           const editorSetting = ctx.std.getOptional(EditorSettingProvider);
           editorSetting?.set?.(
             'docCanvasPreferView',
@@ -296,8 +290,6 @@ const builtinSurfaceToolbarConfig = {
       label: 'Insert to page',
       tooltip: 'Insert to page',
       icon: InsertIntoPageIcon(),
-      when: ({ std }) =>
-        std.get(FeatureFlagService).getFlag('enable_embed_doc_with_alias'),
       run: ctx => {
         const model = ctx.getCurrentModelByType(EmbedSyncedDocModel);
         if (!model) return;
@@ -334,8 +326,6 @@ const builtinSurfaceToolbarConfig = {
       tooltip:
         'Duplicate as note to create an editable copy, the original remains unchanged.',
       icon: DuplicateIcon(),
-      when: ({ std }) =>
-        std.get(FeatureFlagService).getFlag('enable_embed_doc_with_alias'),
       run: ctx => {
         const { gfx } = ctx;
 

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

@@ -129,7 +129,7 @@ export class EdgelessRootBlockComponent extends BlockComponent<
     ) as SurfaceBlockModel;
   }
 
-  private get _viewportElement(): HTMLElement {
+  get viewportElement(): HTMLElement {
     return this.std.get(ViewportElementProvider).viewportElement;
   }
 
@@ -267,7 +267,7 @@ export class EdgelessRootBlockComponent extends BlockComponent<
       this.gfx.viewport.onResize();
     });
 
-    resizeObserver.observe(this._viewportElement);
+    resizeObserver.observe(this.viewportElement);
     this._resizeObserver = resizeObserver;
   }
 

blocksuite/affine/shared/src/adapters/middlewares/copy.ts

@@ -37,7 +37,7 @@ const handlePoint = (
 };
 
 const sliceText = (slots: TransformerSlots, std: EditorHost['std']) => {
-  slots.afterExport.subscribe(payload => {
+  const afterExportSubscription = slots.afterExport.subscribe(payload => {
     if (payload.type === 'block') {
       const snapshot = payload.snapshot;
 
@@ -53,10 +53,14 @@ const sliceText = (slots: TransformerSlots, std: EditorHost['std']) => {
       }
     }
   });
+
+  return () => {
+    afterExportSubscription.unsubscribe();
+  };
 };
 
 export const copyMiddleware = (std: BlockStdScope): TransformerMiddleware => {
   return ({ slots }) => {
-    sliceText(slots, std);
+    return sliceText(slots, std);
   };
 };

blocksuite/affine/shared/src/adapters/middlewares/file-name.ts

@@ -3,7 +3,7 @@ import type { TransformerMiddleware } from '@blocksuite/store';
 export const fileNameMiddleware =
   (fileName?: string): TransformerMiddleware =>
   ({ slots }) => {
-    slots.beforeImport.subscribe(payload => {
+    const beforeImportSubscription = slots.beforeImport.subscribe(payload => {
       if (payload.type !== 'page') {
         return;
       }
@@ -20,4 +20,8 @@ export const fileNameMiddleware =
         ],
       };
     });
+
+    return () => {
+      beforeImportSubscription.unsubscribe();
+    };
   };

blocksuite/affine/shared/src/adapters/middlewares/paste.ts

@@ -528,7 +528,7 @@ export const pasteMiddleware = (
 ): TransformerMiddleware => {
   return ({ slots }) => {
     let tr: PasteTr | undefined;
-    slots.beforeImport.subscribe(payload => {
+    const beforeImportSubscription = slots.beforeImport.subscribe(payload => {
       if (payload.type === 'slice') {
         const { snapshot } = payload;
         flatNote(snapshot);
@@ -543,13 +543,18 @@ export const pasteMiddleware = (
         }
       }
     });
-    slots.afterImport.subscribe(payload => {
+    const afterImportSubscription = slots.afterImport.subscribe(payload => {
       if (tr && payload.type === 'slice') {
         tr.pasted();
         tr.focusPasted();
         tr.convertToLinkedDoc();
       }
     });
+
+    return () => {
+      beforeImportSubscription.unsubscribe();
+      afterImportSubscription.unsubscribe();
+    };
   };
 };
 

blocksuite/affine/shared/src/adapters/middlewares/replace-id.ts

@@ -32,7 +32,7 @@ export const replaceIdMiddleware =
       map(({ model }) => model)
     );
 
-    afterImportBlock$
+    const afterImportBlockSubscription = afterImportBlock$
       .pipe(filter(model => matchModels(model, [DatabaseBlockModel])))
       .subscribe(model => {
         Object.keys(model.props.cells).forEach(cellId => {
@@ -44,7 +44,7 @@ export const replaceIdMiddleware =
       });
 
     // replace LinkedPage pageId with new id in paragraph blocks
-    afterImportBlock$
+    const replaceLinkedPageIdSubscription = afterImportBlock$
       .pipe(
         filter(model =>
           matchModels(model, [ParagraphBlockModel, ListBlockModel])
@@ -84,7 +84,7 @@ export const replaceIdMiddleware =
         }
       });
 
-    afterImportBlock$
+    const replaceSurfaceRefIdSubscription = afterImportBlock$
       .pipe(filter(model => matchModels(model, [SurfaceRefBlockModel])))
       .subscribe(model => {
         const original = model.props.reference;
@@ -105,7 +105,7 @@ export const replaceIdMiddleware =
       });
 
     // TODO(@fundon): process linked block/element
-    afterImportBlock$
+    const replaceLinkedDocIdSubscription = afterImportBlock$
       .pipe(
         filter(model =>
           matchModels(model, [EmbedLinkedDocModel, EmbedSyncedDocModel])
@@ -128,7 +128,7 @@ export const replaceIdMiddleware =
 
     // Before Import
 
-    slots.beforeImport
+    const beforeImportPageSubscription = slots.beforeImport
       .pipe(filter(payload => payload.type === 'page'))
       .subscribe(payload => {
         if (idMap.has(payload.snapshot.meta.id)) {
@@ -140,7 +140,7 @@ export const replaceIdMiddleware =
         payload.snapshot.meta.id = newId;
       });
 
-    slots.beforeImport
+    const beforeImportBlockSubscription = slots.beforeImport
       .pipe(
         filter(
           (payload): payload is BeforeImportBlockPayload =>
@@ -244,4 +244,13 @@ export const replaceIdMiddleware =
           });
         }
       });
+
+    return () => {
+      afterImportBlockSubscription.unsubscribe();
+      replaceLinkedPageIdSubscription.unsubscribe();
+      replaceSurfaceRefIdSubscription.unsubscribe();
+      replaceLinkedDocIdSubscription.unsubscribe();
+      beforeImportPageSubscription.unsubscribe();
+      beforeImportBlockSubscription.unsubscribe();
+    };
   };

blocksuite/affine/shared/src/adapters/middlewares/surface-ref-to-embed.ts

@@ -5,33 +5,42 @@ export const surfaceRefToEmbed =
   (std: BlockStdScope): TransformerMiddleware =>
   ({ slots }) => {
     let pageId: string | null = null;
-    slots.beforeImport.subscribe(payload => {
-      if (payload.type === 'slice') {
-        pageId = payload.snapshot.pageId;
+    const beforeImportSliceSubscription = slots.beforeImport.subscribe(
+      payload => {
+        if (payload.type === 'slice') {
+          pageId = payload.snapshot.pageId;
+        }
       }
-    });
-    slots.beforeImport.subscribe(payload => {
-      // only handle surface-ref block snapshot
-      if (
-        payload.type !== 'block' ||
-        payload.snapshot.flavour !== 'affine:surface-ref'
-      )
-        return;
+    );
+    const beforeImportBlockSubscription = slots.beforeImport.subscribe(
+      payload => {
+        // only handle surface-ref block snapshot
+        if (
+          payload.type !== 'block' ||
+          payload.snapshot.flavour !== 'affine:surface-ref'
+        )
+          return;
 
-      // turn into embed-linked-doc if the current doc is different from the pageId of the surface-ref block
-      const isNotSameDoc = pageId !== std.store.doc.id;
-      if (pageId && isNotSameDoc) {
-        // The blockId of the original surface-ref block
-        const blockId = payload.snapshot.id;
-        payload.snapshot.id = std.workspace.idGenerator();
-        payload.snapshot.flavour = 'affine:embed-linked-doc';
-        payload.snapshot.props = {
-          pageId,
-          params: {
-            mode: 'page',
-            blockIds: [blockId],
-          },
-        };
+        // turn into embed-linked-doc if the current doc is different from the pageId of the surface-ref block
+        const isNotSameDoc = pageId !== std.store.doc.id;
+        if (pageId && isNotSameDoc) {
+          // The blockId of the original surface-ref block
+          const blockId = payload.snapshot.id;
+          payload.snapshot.id = std.workspace.idGenerator();
+          payload.snapshot.flavour = 'affine:embed-linked-doc';
+          payload.snapshot.props = {
+            pageId,
+            params: {
+              mode: 'page',
+              blockIds: [blockId],
+            },
+          };
+        }
       }
-    });
+    );
+
+    return () => {
+      beforeImportSliceSubscription.unsubscribe();
+      beforeImportBlockSubscription.unsubscribe();
+    };
   };

blocksuite/affine/shared/src/adapters/middlewares/title.ts

@@ -3,9 +3,13 @@ import type { DocMeta, TransformerMiddleware } from '@blocksuite/store';
 export const titleMiddleware =
   (metas: DocMeta[]): TransformerMiddleware =>
   ({ slots, adapterConfigs }) => {
-    slots.beforeExport.subscribe(() => {
+    const beforeExportSubscription = slots.beforeExport.subscribe(() => {
       for (const meta of metas) {
         adapterConfigs.set('title:' + meta.id, meta.title);
       }
     });
+
+    return () => {
+      beforeExportSubscription.unsubscribe();
+    };
   };

blocksuite/affine/shared/src/adapters/middlewares/upload.ts

@@ -79,7 +79,7 @@ export const uploadMiddleware = (
       }
     }
 
-    blockView$
+    const blockViewSubscription = blockView$
       .pipe(
         map(payload => {
           if (assetsManager.uploadingAssetsMap.size === 0) return null;
@@ -110,5 +110,9 @@ export const uploadMiddleware = (
         )
       )
       .subscribe();
+
+    return () => {
+      blockViewSubscription.unsubscribe();
+    };
   };
 };

blocksuite/affine/shared/src/services/feature-flag-service.ts

@@ -19,7 +19,6 @@ export interface BlockSuiteFlags {
   enable_callout: boolean;
   enable_edgeless_scribbled_style: boolean;
   enable_table_virtual_scroll: boolean;
-  enable_embed_doc_with_alias: boolean;
   enable_turbo_renderer: boolean;
   enable_dom_renderer: boolean;
 }
@@ -45,7 +44,6 @@ export class FeatureFlagService extends StoreExtension {
     enable_callout: false,
     enable_edgeless_scribbled_style: false,
     enable_table_virtual_scroll: false,
-    enable_embed_doc_with_alias: false,
     enable_turbo_renderer: false,
     enable_dom_renderer: false,
   });

blocksuite/affine/widgets/drag-handle/src/middleware/blocks-filter.ts

@@ -40,7 +40,7 @@ export const gfxBlocksFilter = (
   }
 
   return ({ slots, transformerConfigs }) => {
-    slots.beforeExport.subscribe(payload => {
+    const beforeExportSubscription = slots.beforeExport.subscribe(payload => {
       if (payload.type !== 'block') {
         return;
       }
@@ -54,7 +54,7 @@ export const gfxBlocksFilter = (
       }
     });
 
-    slots.afterExport.subscribe(payload => {
+    const afterExportSubscription = slots.afterExport.subscribe(payload => {
       if (payload.type !== 'block') {
         return;
       }
@@ -110,5 +110,10 @@ export const gfxBlocksFilter = (
         });
       }
     });
+
+    return () => {
+      beforeExportSubscription.unsubscribe();
+      afterExportSubscription.unsubscribe();
+    };
   };
 };

blocksuite/affine/widgets/drag-handle/src/middleware/new-id-cross-doc.ts

@@ -9,36 +9,45 @@ export const newIdCrossDoc =
     let samePage = false;
     const oldToNewIdMap = new Map<string, string>();
 
-    slots.beforeImport.subscribe(payload => {
-      if (payload.type === 'slice') {
-        samePage = payload.snapshot.pageId === std.store.id;
+    const beforeImportSliceSubscription = slots.beforeImport.subscribe(
+      payload => {
+        if (payload.type === 'slice') {
+          samePage = payload.snapshot.pageId === std.store.id;
+        }
+        if (payload.type === 'block' && !samePage) {
+          const newId = std.workspace.idGenerator();
+
+          oldToNewIdMap.set(payload.snapshot.id, newId);
+          payload.snapshot.id = newId;
+        }
       }
-      if (payload.type === 'block' && !samePage) {
-        const newId = std.workspace.idGenerator();
+    );
 
-        oldToNewIdMap.set(payload.snapshot.id, newId);
-        payload.snapshot.id = newId;
+    const afterImportBlockSubscription = slots.afterImport.subscribe(
+      payload => {
+        if (
+          !samePage &&
+          payload.type === 'block' &&
+          matchModels(payload.model, [DatabaseBlockModel])
+        ) {
+          const originalCells = payload.model.props.cells;
+          const newCells = {
+            ...originalCells,
+          };
+
+          Object.keys(originalCells).forEach(cellId => {
+            if (oldToNewIdMap.has(cellId)) {
+              newCells[oldToNewIdMap.get(cellId)!] = originalCells[cellId];
+            }
+          });
+
+          payload.model.props.cells$.value = newCells;
+        }
       }
-    });
+    );
 
-    slots.afterImport.subscribe(payload => {
-      if (
-        !samePage &&
-        payload.type === 'block' &&
-        matchModels(payload.model, [DatabaseBlockModel])
-      ) {
-        const originalCells = payload.model.props.cells;
-        const newCells = {
-          ...originalCells,
-        };
-
-        Object.keys(originalCells).forEach(cellId => {
-          if (oldToNewIdMap.has(cellId)) {
-            newCells[oldToNewIdMap.get(cellId)!] = originalCells[cellId];
-          }
-        });
-
-        payload.model.props.cells$.value = newCells;
-      }
-    });
+    return () => {
+      beforeImportSliceSubscription.unsubscribe();
+      afterImportBlockSubscription.unsubscribe();
+    };
   };

blocksuite/affine/widgets/drag-handle/src/middleware/reorder-list.ts

@@ -7,19 +7,25 @@ import type { TransformerMiddleware } from '@blocksuite/store';
 export const reorderList =
   (std: BlockStdScope): TransformerMiddleware =>
   ({ slots }) => {
-    slots.afterImport.subscribe(payload => {
-      if (payload.type === 'block') {
-        const model = payload.model;
-        if (
-          matchModels(model, [ListBlockModel]) &&
-          model.props.type === 'numbered'
-        ) {
-          const next = std.store.getNext(model);
-          correctNumberedListsOrderToPrev(std.store, model);
-          if (next) {
-            correctNumberedListsOrderToPrev(std.store, next);
+    const afterImportBlockSubscription = slots.afterImport.subscribe(
+      payload => {
+        if (payload.type === 'block') {
+          const model = payload.model;
+          if (
+            matchModels(model, [ListBlockModel]) &&
+            model.props.type === 'numbered'
+          ) {
+            const next = std.store.getNext(model);
+            correctNumberedListsOrderToPrev(std.store, model);
+            if (next) {
+              correctNumberedListsOrderToPrev(std.store, next);
+            }
           }
         }
       }
-    });
+    );
+
+    return () => {
+      afterImportBlockSubscription.unsubscribe();
+    };
   };

blocksuite/affine/widgets/slash-menu/src/utils.ts

@@ -95,11 +95,8 @@ export function formatDate(date: Date) {
 }
 
 export function formatTime(date: Date) {
-  // mm-dd hh:mm
-  const month = (date.getMonth() + 1).toString().padStart(2, '0');
-  const day = date.getDate().toString().padStart(2, '0');
   const hours = date.getHours().toString().padStart(2, '0');
   const minutes = date.getMinutes().toString().padStart(2, '0');
-  const strTime = `${month}-${day} ${hours}:${minutes}`;
+  const strTime = `${formatDate(date)} ${hours}:${minutes}`;
   return strTime;
 }

blocksuite/framework/store/src/model/store/store.ts

@@ -22,6 +22,7 @@ import {
   type BlockModel,
   type BlockOptions,
   type BlockProps,
+  toDraftModel,
   type YBlock,
 } from '../block/index.js';
 import { DocCRUD } from './crud.js';
@@ -1143,13 +1144,82 @@ export class Store {
       return;
     }
 
-    this.transact(() => {
-      this._crud.moveBlocks(
-        blocksToMove.map(model => model.id),
-        newParent.id,
-        targetSibling?.id ?? null,
-        shouldInsertBeforeSibling
+    if (
+      blocksToMove.length > 1 &&
+      targetSibling &&
+      blocksToMove.includes(targetSibling)
+    ) {
+      console.error(
+        'Cannot move blocks when the target sibling is in the blocks to move'
       );
+      return;
+    }
+
+    if (blocksToMove.length === 1 && targetSibling === blocksToMove[0]) {
+      return;
+    }
+
+    if (blocksToMove.includes(newParent)) {
+      console.error(
+        'Cannot move blocks when the new parent is in the blocks to move'
+      );
+      return;
+    }
+
+    for (let i = 0; i < blocksToMove.length - 1; i++) {
+      const block = blocksToMove[i];
+      const nextBlock = blocksToMove[i + 1];
+
+      if (
+        block.parent &&
+        block.parent === nextBlock.parent &&
+        this.getNext(block) !== nextBlock
+      ) {
+        console.error(
+          'The blocks to move are not contiguous under their parent'
+        );
+        return;
+      }
+    }
+
+    this.transact(() => {
+      let insertIndex = 0;
+      const updateInsertIndex = () => {
+        if (targetSibling) {
+          const targetIndex = newParent.children.indexOf(targetSibling);
+          if (targetIndex === -1) {
+            console.warn('Target sibling not found, just insert to the end');
+          } else {
+            insertIndex = shouldInsertBeforeSibling
+              ? targetIndex
+              : targetIndex + 1;
+          }
+        }
+      };
+
+      blocksToMove.forEach(block => {
+        const draftModel = toDraftModel(block);
+        const props = {
+          ...draftModel.props,
+          children: block.children,
+        };
+
+        console.log(props);
+
+        this._crud.deleteBlock(block.id, {
+          deleteChildren: false,
+        });
+
+        updateInsertIndex();
+
+        this._crud.addBlock(
+          draftModel.id,
+          draftModel.flavour,
+          props,
+          newParent.id,
+          insertIndex
+        );
+      });
     });
   }
 

blocksuite/framework/store/src/transformer/middleware.ts

@@ -113,6 +113,8 @@ type TransformerMiddlewareOptions = {
   transformerConfigs: Map<string, unknown>;
 };
 
+type TransformerMiddlewareCleanup = () => void;
+
 export type TransformerMiddleware = (
   options: TransformerMiddlewareOptions
-) => void;
+) => void | TransformerMiddlewareCleanup;

blocksuite/framework/store/src/transformer/transformer.ts

@@ -1,3 +1,4 @@
+import { DisposableGroup } from '@blocksuite/global/disposable';
 import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
 import { nextTick } from '@blocksuite/global/utils';
 import { Subject } from 'rxjs';
@@ -67,6 +68,8 @@ export class Transformer {
 
   private readonly _docCRUD: DocCRUD;
 
+  private readonly _disposables: DisposableGroup = new DisposableGroup();
+
   private readonly _slots: TransformerSlots = {
     beforeImport: new Subject<BeforeImportPayload>(),
     afterImport: new Subject<AfterImportPayload>(),
@@ -366,13 +369,16 @@ export class Transformer {
     this._docCRUD = docCRUD;
 
     middlewares.forEach(middleware => {
-      middleware({
+      const cleanup = middleware({
         slots: this._slots,
         docCRUD: this._docCRUD,
         assetsManager: this._assetsManager,
         adapterConfigs: this._adapterConfigs,
         transformerConfigs: this._transformerConfigs,
       });
+      if (cleanup) {
+        this._disposables.add(cleanup);
+      }
     });
   }
 
@@ -646,4 +652,9 @@ export class Transformer {
   reset() {
     this._assetsManager.cleanup();
   }
+
+  [Symbol.dispose]() {
+    this._disposables.dispose();
+    this._assetsManager.cleanup();
+  }
 }

packages/frontend/component/package.json

@@ -70,7 +70,7 @@
   "devDependencies": {
     "@affine-tools/utils": "workspace:*",
     "@blocksuite/affine": "workspace:*",
-    "@chromatic-com/storybook": "^3.2.2",
+    "@chromatic-com/storybook": "^4.0.0",
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/addon-interactions": "^8.4.7",
     "@storybook/addon-links": "^9.0.0",

packages/frontend/core/src/modules/dnd/index.ts

@@ -2,17 +2,11 @@ import { type Framework } from '@toeverything/infra';
 
 import { DocsService } from '../doc';
 import { EditorSettingService } from '../editor-setting';
-import { FeatureFlagService } from '../feature-flag';
 import { WorkspaceScope, WorkspaceService } from '../workspace';
 import { DndService } from './services';
 
 export function configureDndModule(framework: Framework) {
   framework
     .scope(WorkspaceScope)
-    .service(DndService, [
-      DocsService,
-      WorkspaceService,
-      EditorSettingService,
-      FeatureFlagService,
-    ]);
+    .service(DndService, [DocsService, WorkspaceService, EditorSettingService]);
 }

packages/frontend/core/src/modules/dnd/services/index.ts

@@ -18,7 +18,6 @@ import { Service } from '@toeverything/infra';
 
 import type { DocsService } from '../../doc';
 import type { EditorSettingService } from '../../editor-setting';
-import type { FeatureFlagService } from '../../feature-flag';
 import { resolveLinkToDoc } from '../../navigation';
 import type { WorkspaceService } from '../../workspace';
 
@@ -35,8 +34,7 @@ export class DndService extends Service {
   constructor(
     private readonly docsService: DocsService,
     private readonly workspaceService: WorkspaceService,
-    private readonly editorSettingService: EditorSettingService,
-    private readonly featureFlagService: FeatureFlagService
+    private readonly editorSettingService: EditorSettingService
   ) {
     super();
 
@@ -186,9 +184,7 @@ export class DndService extends Service {
           return false;
         },
         onDropTargetChange: (args: MonitorDragEvent<MixedDNDData>) => {
-          if (this.featureFlagService.flags.enable_embed_doc_with_alias.value) {
-            changeDocCardView(args);
-          }
+          changeDocCardView(args);
         },
       })
     );

packages/frontend/core/src/modules/feature-flag/constant.ts

@@ -259,15 +259,6 @@ export const AFFINE_FLAGS = {
     configurable: isCanaryBuild,
     defaultState: false,
   },
-  // TODO(@L-Sun): remove this flag after the feature is released
-  enable_embed_doc_with_alias: {
-    category: 'blocksuite',
-    bsFlag: 'enable_embed_doc_with_alias',
-    displayName: 'Embed doc with alias',
-    description: 'Embed doc with alias',
-    configurable: isCanaryBuild,
-    defaultState: isCanaryBuild,
-  },
   enable_setting_subpage_animation: {
     category: 'affine',
     displayName: 'Enable Setting Subpage Animation',

packages/frontend/core/src/modules/share-menu/view/share-menu/general-access/public-page-button.tsx

@@ -21,6 +21,9 @@ export const PublicDoc = ({ disabled }: { disabled?: boolean }) => {
   const t = useI18n();
   const shareInfoService = useService(ShareInfoService);
   const isSharedPage = useLiveData(shareInfoService.shareInfo.isShared$);
+  const isRevalidating = useLiveData(
+    shareInfoService.shareInfo.isRevalidating$
+  );
 
   useEffect(() => {
     shareInfoService.shareInfo.revalidate();
@@ -135,6 +138,8 @@ export const PublicDoc = ({ disabled }: { disabled?: boolean }) => {
             contentStyle={{
               width: '100%',
             }}
+            loading={isRevalidating}
+            disabled={isRevalidating}
           >
             {isSharedPage
               ? t['com.affine.share-menu.option.link.readonly']()

tests/blocksuite/e2e/embed-synced-doc/edgeless.spec.ts

@@ -142,14 +142,6 @@ test.describe('Embed synced doc in edgeless mode', () => {
         { title: 'Page 1', content: 'hello page 1', inEdgeless: true },
       ]);
 
-      // TODO(@L-Sun): remove this after this feature is released
-      await page.evaluate(() => {
-        const { FeatureFlagService } = window.$blocksuite.services;
-        window.editor.std
-          .get(FeatureFlagService)
-          .setFlag('enable_embed_doc_with_alias', true);
-      });
-
       await switchEditorMode(page);
 
       const edgelessEmbedSyncedBlock = page.locator(

yarn.lock

@@ -313,7 +313,7 @@ __metadata:
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "npm:^1.0.3"
     "@blocksuite/affine": "workspace:*"
     "@blocksuite/icons": "npm:^2.2.12"
-    "@chromatic-com/storybook": "npm:^3.2.2"
+    "@chromatic-com/storybook": "npm:^4.0.0"
     "@emotion/react": "npm:^11.14.0"
     "@emotion/styled": "npm:^11.14.0"
     "@radix-ui/react-avatar": "npm:^1.1.2"
@@ -4579,18 +4579,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@chromatic-com/storybook@npm:^3.2.2":
-  version: 3.2.6
-  resolution: "@chromatic-com/storybook@npm:3.2.6"
+"@chromatic-com/storybook@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "@chromatic-com/storybook@npm:4.0.0"
   dependencies:
-    chromatic: "npm:^11.15.0"
+    "@neoconfetti/react": "npm:^1.0.0"
+    chromatic: "npm:^12.0.0"
     filesize: "npm:^10.0.12"
     jsonfile: "npm:^6.1.0"
-    react-confetti: "npm:^6.1.0"
     strip-ansi: "npm:^7.1.0"
   peerDependencies:
-    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
-  checksum: 10/90f230b0ca5aa55a68a5d816099186a8ee715c23466a54571bca4cd6c9aab80a994b27a5bee5c6aa579d4f8e0b8e6bae6eefb45d395aa4f62d4f48b48138cd99
+    storybook: ^0.0.0-0 || ^9.0.0 || ^9.1.0-0
+  checksum: 10/326d887e58ff21731d5face900e8d64387a84328ab88e2423eb5d562f6302aff462845997210788d6edfda7689c13713630bb506fe923e78d86e9e28a4e6925d
   languageName: node
   linkType: hard
 
@@ -8959,6 +8959,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@neoconfetti/react@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "@neoconfetti/react@npm:1.0.0"
+  checksum: 10/71a623f2df79c773b6693fab3a252ee2d7bb1da4a8986c2d15b5ef25493835c1de64f2e44637faf823970d43d63f32227b09a6605ad23f39bc82c14d810e45cd
+  languageName: node
+  linkType: hard
+
 "@nestjs-cls/transactional-adapter-prisma@npm:^1.2.19":
   version: 1.2.20
   resolution: "@nestjs-cls/transactional-adapter-prisma@npm:1.2.20"
@@ -18530,9 +18537,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chromatic@npm:^11.15.0":
-  version: 11.28.2
-  resolution: "chromatic@npm:11.28.2"
+"chromatic@npm:^12.0.0":
+  version: 12.0.0
+  resolution: "chromatic@npm:12.0.0"
   peerDependencies:
     "@chromatic-com/cypress": ^0.*.* || ^1.0.0
     "@chromatic-com/playwright": ^0.*.* || ^1.0.0
@@ -18545,7 +18552,7 @@ __metadata:
     chroma: dist/bin.js
     chromatic: dist/bin.js
     chromatic-cli: dist/bin.js
-  checksum: 10/d5dc1d407157fb5dcdf1e43276d64731e8a95addfc29006771b34e60b126adbe54f1357886a391195edf4ebdff515bd82af36a357009f59f141ad634afe47389
+  checksum: 10/bae3b9f68196a0c5eb52e5ca25f20f0fa7a4276ccd35215d693bb4bb19727ac58fb94f74ea4d32b3f65f70e568d28378015d5da305af88ee1acf20c271dd3f2d
   languageName: node
   linkType: hard
 
@@ -29827,17 +29834,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-confetti@npm:^6.1.0":
-  version: 6.4.0
-  resolution: "react-confetti@npm:6.4.0"
-  dependencies:
-    tween-functions: "npm:^1.2.0"
-  peerDependencies:
-    react: ^16.3.0 || ^17.0.1 || ^18.0.0 || ^19.0.0
-  checksum: 10/ebb5c8384f915ffcbd1083cf034acb4aa7ea3fa3db26751788f028cdbf5332eb5dea576699f79df0981e22765cd7727b7f8135856a0326f712db84570ef2f724
-  languageName: node
-  linkType: hard
-
 "react-day-picker@npm:^9.4.3":
   version: 9.7.0
   resolution: "react-day-picker@npm:9.7.0"
@@ -33312,13 +33308,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tween-functions@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "tween-functions@npm:1.2.0"
-  checksum: 10/f145f39187aacfe6e3c6bfe8452be4061a569b8e1e75c28169c55b7cdf519daa1877c79a8a2cdc902b68f49b67b8478f34818ff02529d27ae5aa0545e7fbdc06
-  languageName: node
-  linkType: hard
-
 "typanion@npm:^3.14.0, typanion@npm:^3.8.0":
   version: 3.14.0
   resolution: "typanion@npm:3.14.0"