refactor(editor): add helper function for undo notification (#11903)

### What Changes
- Refactors the `notify` function call with undo button. It is called `notifyWithUndo`, which can  associate the visibility of the `NotificationCard` with the top undo item in history stack, such as undo by shortcut `Cmd+Z`.
- change icon of the "Insert into page" button. Close [BS-3267](https://linear.app/affine-design/issue/BS-3267/frame和group的insert-into-page图标也更换一下)

blocksuite/affine/blocks/embed/src/common/render-linked-doc.ts

@@ -11,7 +11,7 @@ import {
 import { EMBED_CARD_HEIGHT } from '@blocksuite/affine-shared/consts';
 import { NotificationProvider } from '@blocksuite/affine-shared/services';
 import { matchModels } from '@blocksuite/affine-shared/utils';
-import { BlockStdScope, EditorLifeCycleExtension } from '@blocksuite/std';
+import { BlockStdScope } from '@blocksuite/std';
 import {
   type BlockModel,
   type BlockSnapshot,
@@ -337,45 +337,12 @@ export function promptDocTitle(std: BlockStdScope, autofill?: string) {
   });
 }
 
-export function notifyDocCreated(std: BlockStdScope, doc: Store) {
-  const notification = std.getOptional(NotificationProvider);
-  if (!notification) return;
-
-  const abortController = new AbortController();
-  const clear = () => {
-    doc.history.off('stack-item-added', addHandler);
-    doc.history.off('stack-item-popped', popHandler);
-    disposable.unsubscribe();
-  };
-  const closeNotify = () => {
-    abortController.abort();
-    clear();
-  };
-
-  // edit or undo or switch doc, close notify toast
-  const addHandler = doc.history.on('stack-item-added', closeNotify);
-  const popHandler = doc.history.on('stack-item-popped', closeNotify);
-  const disposable = std
-    .get(EditorLifeCycleExtension)
-    .slots.unmounted.subscribe(closeNotify);
-
-  notification.notify({
+export function notifyDocCreated(std: BlockStdScope) {
+  std.getOptional(NotificationProvider)?.notifyWithUndoAction({
     title: 'Linked doc created',
     message: 'You can click undo to recovery block content',
     accent: 'info',
     duration: 10 * 1000,
-    actions: [
-      {
-        key: 'undo',
-        label: 'Undo',
-        onClick: () => {
-          doc.undo();
-          clear();
-        },
-      },
-    ],
-    abort: abortController.signal,
-    onClose: clear,
   });
 }
 

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

@@ -230,7 +230,7 @@ export const builtinToolbarConfig = {
               draftedModels,
               title
             );
-            notifyDocCreated(std, store);
+            notifyDocCreated(std);
 
             track('DocCreated', {
               segment: 'doc',

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

@@ -16,6 +16,7 @@ import {
   SurfaceRefBlockSchema,
 } from '@blocksuite/affine-model';
 import {
+  NotificationProvider,
   type ToolbarContext,
   type ToolbarModuleConfig,
   ToolbarModuleExtension,
@@ -26,7 +27,11 @@ import {
 } from '@blocksuite/affine-shared/utils';
 import { mountFrameTitleEditor } from '@blocksuite/affine-widget-frame-title';
 import { Bound } from '@blocksuite/global/gfx';
-import { EditIcon, PageIcon, UngroupIcon } from '@blocksuite/icons/lit';
+import {
+  EditIcon,
+  InsertIntoPageIcon,
+  UngroupIcon,
+} from '@blocksuite/icons/lit';
 import { type BlockComponent, BlockFlavourIdentifier } from '@blocksuite/std';
 import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
 import type { ExtensionType } from '@blocksuite/store';
@@ -46,9 +51,8 @@ const builtinSurfaceToolbarConfig = {
     {
       id: 'a.insert-into-page',
       label: 'Insert into Page',
-      showLabel: true,
       tooltip: 'Insert into Page',
-      icon: PageIcon(),
+      icon: InsertIntoPageIcon(),
       when: ctx => ctx.getSurfaceModelsByType(FrameBlockModel).length === 1,
       run(ctx) {
         const model = ctx.getCurrentModelByType(FrameBlockModel);
@@ -78,13 +82,23 @@ const builtinSurfaceToolbarConfig = {
           );
         }
 
+        ctx.store.captureSync();
         ctx.store.addBlock(
           SurfaceRefBlockSchema.model.flavour,
           { reference: frameId, refFlavour: FrameBlockSchema.model.flavour },
           lastNoteId
         );
 
-        toast(ctx.host, 'Frame has been inserted into doc');
+        const notification = ctx.std.getOptional(NotificationProvider);
+        if (notification) {
+          notification.notifyWithUndoAction({
+            title: 'Frame inserted into Page.',
+            message: 'Frame has been inserted into doc',
+            accent: 'success',
+          });
+        } else {
+          toast(ctx.host, 'Frame has been inserted into doc');
+        }
       },
     },
     {

blocksuite/affine/blocks/note/src/configs/toolbar.ts

@@ -31,10 +31,7 @@ import {
   LinkedPageIcon,
   ScissorsIcon,
 } from '@blocksuite/icons/lit';
-import {
-  BlockFlavourIdentifier,
-  EditorLifeCycleExtension,
-} from '@blocksuite/std';
+import { BlockFlavourIdentifier } from '@blocksuite/std';
 import type { ExtensionType } from '@blocksuite/store';
 import { computed } from '@preact/signals-core';
 import { html } from 'lit';
@@ -504,34 +501,6 @@ function setDisplayMode(
     ctx.selection.clear();
   }
 
-  const abortController = new AbortController();
-  const clear = () => {
-    ctx.history.off('stack-item-added', addHandler);
-    ctx.history.off('stack-item-popped', popHandler);
-    disposable.unsubscribe();
-  };
-  const closeNotify = () => {
-    abortController.abort();
-    clear();
-  };
-
-  const addHandler = ctx.history.on('stack-item-added', closeNotify);
-  const popHandler = ctx.history.on('stack-item-popped', closeNotify);
-  const disposable = ctx.std
-    .get(EditorLifeCycleExtension)
-    .slots.unmounted.subscribe(closeNotify);
-
-  const undo = () => {
-    ctx.store.undo();
-    closeNotify();
-  };
-
-  const viewInToc = () => {
-    const sidebar = ctx.std.getOptional(SidebarExtensionIdentifier);
-    sidebar?.open('outline');
-    closeNotify();
-  };
-
   const data =
     newMode === NoteDisplayMode.EdgelessOnly
       ? {
@@ -544,27 +513,21 @@ function setDisplayMode(
         };
 
   const notification = ctx.std.getOptional(NotificationProvider);
-  notification?.notify({
+  notification?.notifyWithUndoAction({
     title: data.title,
     message: `${data.message} Find it in the TOC for quick navigation.`,
     accent: 'success',
     duration: 5 * 1000,
     actions: [
-      {
-        key: 'undo-display-in-page',
-        label: 'Undo',
-        onClick: () => undo(),
-      },
       {
         key: 'view-in-toc',
         label: 'View in Toc',
-        onClick: () => viewInToc(),
+        onClick: () => {
+          const sidebar = ctx.std.getOptional(SidebarExtensionIdentifier);
+          sidebar?.open('outline');
+        },
       },
     ],
-    abort: abortController.signal,
-    onClose: () => {
-      clear();
-    },
   });
 
   ctx.track('NoteDisplayModeChanged', {

blocksuite/affine/blocks/note/src/quick-action.ts

@@ -58,7 +58,7 @@ export const quickActionConfig: QuickActionConfig[] = [
             draftedModels,
             title
           ).catch(console.error);
-          notifyDocCreated(std, doc);
+          notifyDocCreated(std);
         })
         .catch(console.error);
     },

blocksuite/affine/blocks/root/src/configs/toolbar.ts

@@ -244,7 +244,7 @@ const turnIntoLinkedDoc = {
           draftedModels,
           title
         );
-        notifyDocCreated(std, store);
+        notifyDocCreated(std);
 
         track('DocCreated', {
           segment: 'doc',

blocksuite/affine/blocks/root/src/edgeless/configs/toolbar/more.ts

@@ -347,7 +347,7 @@ export const moreActions = [
               other: 'new doc',
             });
 
-            notifyDocCreated(ctx.std, ctx.store);
+            notifyDocCreated(ctx.std);
           };
 
           create().catch(console.error);

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

@@ -156,7 +156,7 @@ export class PageKeyboardManager {
           draftedModels,
           title
         ).catch(console.error);
-        notifyDocCreated(rootComponent.std, doc);
+        notifyDocCreated(rootComponent.std);
       })
       .catch(console.error);
   }