feat(editor): add more open doc options to editor toolbar (#9588)

fix AF-2036, AF-2092

blocksuite/affine/components/src/rich-text/inline/presets/nodes/index.ts

@@ -1,4 +1,7 @@
 export { AffineLink, toggleLinkPopup } from './link-node/index.js';
 export * from './reference-node/reference-config.js';
 export { AffineReference } from './reference-node/reference-node.js';
-export type { RefNodeSlots } from './reference-node/types.js';
+export type {
+  DocLinkClickedEvent,
+  RefNodeSlots,
+} from './reference-node/types.js';

blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-popup.ts

@@ -3,6 +3,8 @@ import {
   FeatureFlagService,
   GenerateDocUrlProvider,
   type LinkEventType,
+  OpenDocExtensionIdentifier,
+  type OpenDocMode,
   type TelemetryEvent,
   TelemetryProvider,
 } from '@blocksuite/affine-shared/services';
@@ -26,11 +28,9 @@ import { join } from 'lit/directives/join.js';
 import { repeat } from 'lit/directives/repeat.js';
 
 import {
-  CenterPeekIcon,
   CopyIcon,
   DeleteIcon,
   EditIcon,
-  ExpandFullSmallIcon,
   MoreVerticalIcon,
   OpenIcon,
   SmallArrowDownIcon,
@@ -47,6 +47,7 @@ import { RefNodeSlotsProvider } from '../../../../extension/index.js';
 import type { AffineInlineEditor } from '../../affine-inline-specs.js';
 import { ReferenceAliasPopup } from './reference-alias-popup.js';
 import { styles } from './styles.js';
+import type { DocLinkClickedEvent } from './types.js';
 
 export class ReferencePopup extends WithDisposable(LitElement) {
   static override styles = styles;
@@ -66,10 +67,11 @@ export class ReferencePopup extends WithDisposable(LitElement) {
     track(this.std, 'CopiedLink', { control: 'copy link' });
   };
 
-  private readonly _openDoc = () => {
-    this.std
-      .getOptional(RefNodeSlotsProvider)
-      ?.docLinkClicked.emit(this.referenceInfo);
+  private readonly _openDoc = (event?: Partial<DocLinkClickedEvent>) => {
+    this.std.getOptional(RefNodeSlotsProvider)?.docLinkClicked.emit({
+      ...this.referenceInfo,
+      ...event,
+    });
   };
 
   private readonly _openEditPopup = (e: MouseEvent) => {
@@ -134,8 +136,11 @@ export class ReferencePopup extends WithDisposable(LitElement) {
     );
   }
 
-  get _openButtonDisabled() {
-    return this.referenceDocId === this.doc.id;
+  _openButtonDisabled(openMode?: OpenDocMode) {
+    if (openMode === 'open-in-active-view') {
+      return this.referenceDocId === this.doc.id;
+    }
+    return false;
   }
 
   get block() {
@@ -246,28 +251,37 @@ export class ReferencePopup extends WithDisposable(LitElement) {
   }
 
   private _openMenuButton() {
-    const buttons: MenuItem[] = [
-      {
-        label: 'Open this doc',
-        type: 'open-this-doc',
-        icon: ExpandFullSmallIcon,
-        action: this._openDoc,
-        disabled: this._openButtonDisabled,
-      },
-    ];
+    const openDocConfig = this.std.get(OpenDocExtensionIdentifier);
 
-    // open in new tab
-
-    if (isPeekable(this.target)) {
-      buttons.push({
-        label: 'Open in center peek',
-        type: 'open-in-center-peek',
-        icon: CenterPeekIcon,
-        action: () => peek(this.target),
-      });
-    }
-
-    // open in split view
+    const buttons: MenuItem[] = openDocConfig.items
+      .map(item => {
+        if (
+          (item.type === 'open-in-center-peek' && !isPeekable(this.target)) ||
+          !openDocConfig?.isAllowed(item.type)
+        ) {
+          return null;
+        }
+        return {
+          label: item.label,
+          type: item.type,
+          icon: item.icon,
+          action: () => {
+            if (item.type === 'open-in-center-peek') {
+              peek(this.target);
+            } else {
+              this._openDoc({ openMode: item.type });
+            }
+          },
+          disabled: this._openButtonDisabled(item.type),
+          when: () => {
+            if (item.type === 'open-in-center-peek') {
+              return isPeekable(this.target);
+            }
+            return openDocConfig?.isAllowed(item.type) ?? true;
+          },
+        };
+      })
+      .filter(item => item !== null);
 
     if (buttons.length === 0) {
       return nothing;

blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/types.ts

@@ -1,6 +1,13 @@
 import type { ReferenceInfo } from '@blocksuite/affine-model';
+import type { OpenDocMode } from '@blocksuite/affine-shared/services';
 import type { Slot } from '@blocksuite/global/utils';
 
-export type RefNodeSlots = {
-  docLinkClicked: Slot<ReferenceInfo>;
+export type DocLinkClickedEvent = ReferenceInfo & {
+  // default is active view
+  openMode?: OpenDocMode;
+  event?: MouseEvent;
+};
+
+export type RefNodeSlots = {
+  docLinkClicked: Slot<DocLinkClickedEvent>;
 };

blocksuite/affine/components/src/toolbar/menu-button.ts

@@ -204,6 +204,7 @@ export class EditorMenuAction extends LitElement {
 
     ::slotted(svg) {
       color: var(--affine-icon-color);
+      font-size: 20px;
     }
   `;