refactor(editor): edgeless internal embed card toolbar config extension (#10717)

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

@@ -2,13 +2,17 @@ import { toast } from '@blocksuite/affine-components/toast';
 import { EmbedSyncedDocModel } from '@blocksuite/affine-model';
 import {
   ActionPlacement,
+  type LinkEventType,
   type OpenDocMode,
   type ToolbarAction,
   type ToolbarActionGroup,
   type ToolbarContext,
   type ToolbarModuleConfig,
+  ToolbarModuleExtension,
 } from '@blocksuite/affine-shared/services';
 import { getBlockProps } from '@blocksuite/affine-shared/utils';
+import { BlockFlavourIdentifier } from '@blocksuite/block-std';
+import { Bound } from '@blocksuite/global/gfx';
 import {
   ArrowDownSmallIcon,
   CaptionIcon,
@@ -18,8 +22,8 @@ import {
   ExpandFullIcon,
   OpenInNewIcon,
 } from '@blocksuite/icons/lit';
-import { Slice } from '@blocksuite/store';
-import { signal } from '@preact/signals-core';
+import { type ExtensionType, Slice } from '@blocksuite/store';
+import { computed, signal } from '@preact/signals-core';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { keyed } from 'lit/directives/keyed.js';
@@ -28,167 +32,171 @@ import { repeat } from 'lit/directives/repeat.js';
 import { EmbedSyncedDocBlockComponent } from '../embed-synced-doc-block';
 
 const trackBaseProps = {
-  segment: 'doc',
-  page: 'doc editor',
-  module: 'toolbar',
   category: 'linked doc',
   type: 'embed view',
 };
 
-export const builtinToolbarConfig = {
+const createOnToggleFn =
+  (
+    ctx: ToolbarContext,
+    name: Extract<
+      LinkEventType,
+      'OpenedViewSelector' | 'OpenedCardScaleSelector'
+    >,
+    control: 'switch view' | 'switch card scale'
+  ) =>
+  (e: CustomEvent<boolean>) => {
+    e.stopPropagation();
+    const opened = e.detail;
+    if (!opened) return;
+
+    ctx.track(name, { ...trackBaseProps, control });
+  };
+
+const openDocActions = [
+  {
+    mode: 'open-in-active-view',
+    id: 'a.open-in-active-view',
+    label: 'Open this doc',
+    icon: ExpandFullIcon(),
+  },
+] as const satisfies (Pick<ToolbarAction, 'id' | 'label' | 'icon'> & {
+  mode: OpenDocMode;
+})[];
+
+const openDocActionGroup = {
+  placement: ActionPlacement.Start,
+  id: 'A.open-doc',
+  content(ctx) {
+    const block = ctx.getCurrentBlockByType(EmbedSyncedDocBlockComponent);
+    if (!block) return null;
+
+    const actions = openDocActions.map<ToolbarAction>(action => {
+      const openMode = action.mode;
+      const shouldOpenInActiveView = openMode === 'open-in-active-view';
+      return {
+        ...action,
+        disabled: shouldOpenInActiveView
+          ? block.model.props.pageId === ctx.store.id
+          : false,
+        when: true,
+        run: (_ctx: ToolbarContext) => block.open({ openMode }),
+      };
+    });
+
+    return html`
+      <editor-menu-button
+        .contentPadding="${'8px'}"
+        .button=${html`
+          <editor-icon-button aria-label="Open doc" .tooltip=${'Open doc'}>
+            ${OpenInNewIcon()} ${ArrowDownSmallIcon()}
+          </editor-icon-button>
+        `}
+      >
+        <div data-size="small" data-orientation="vertical">
+          ${repeat(
+            actions,
+            action => action.id,
+            ({ label, icon, run, disabled }) => html`
+              <editor-menu-action
+                aria-label=${ifDefined(label)}
+                ?disabled=${ifDefined(
+                  typeof disabled === 'function' ? disabled(ctx) : disabled
+                )}
+                @click=${() => run?.(ctx)}
+              >
+                ${icon}<span class="label">${label}</span>
+              </editor-menu-action>
+            `
+          )}
+        </div>
+      </editor-menu-button>
+    `;
+  },
+} as const satisfies ToolbarAction;
+
+const conversionsActionGroup = {
+  id: 'a.conversions',
   actions: [
     {
-      placement: ActionPlacement.Start,
-      id: 'A.open-doc',
-      actions: [
-        {
-          id: 'open-in-active-view',
-          label: 'Open this doc',
-          icon: ExpandFullIcon(),
-        },
-      ],
-      content(ctx) {
-        const block = ctx.getCurrentBlockByType(EmbedSyncedDocBlockComponent);
-        if (!block) return null;
-
-        const actions = this.actions
-          .map<ToolbarAction>(action => {
-            const shouldOpenInActiveView = action.id === 'open-in-active-view';
-            const allowed =
-              typeof action.when === 'function'
-                ? action.when(ctx)
-                : (action.when ?? true);
-            return {
-              ...action,
-              disabled: shouldOpenInActiveView
-                ? block.model.props.pageId === ctx.store.id
-                : false,
-              when: allowed,
-              run: (_ctx: ToolbarContext) =>
-                block.open({
-                  openMode: action.id as OpenDocMode,
-                }),
-            };
-          })
-          .filter(action => {
-            if (typeof action.when === 'function') return action.when(ctx);
-            return action.when ?? true;
-          });
-
-        return html`
-          <editor-menu-button
-            .contentPadding="${'8px'}"
-            .button=${html`
-              <editor-icon-button aria-label="Open doc" .tooltip=${'Open doc'}>
-                ${OpenInNewIcon()} ${ArrowDownSmallIcon()}
-              </editor-icon-button>
-            `}
-          >
-            <div data-size="small" data-orientation="vertical">
-              ${repeat(
-                actions,
-                action => action.id,
-                ({ label, icon, run, disabled }) => html`
-                  <editor-menu-action
-                    aria-label=${ifDefined(label)}
-                    ?disabled=${ifDefined(
-                      typeof disabled === 'function' ? disabled(ctx) : disabled
-                    )}
-                    @click=${() => run?.(ctx)}
-                  >
-                    ${icon}<span class="label">${label}</span>
-                  </editor-menu-action>
-                `
-              )}
-            </div>
-          </editor-menu-button>
-        `;
-      },
-    } satisfies ToolbarActionGroup<ToolbarAction>,
-    {
-      id: 'a.conversions',
-      actions: [
-        {
-          id: 'inline',
-          label: 'Inline view',
-          run(ctx) {
-            const block = ctx.getCurrentBlockByType(
-              EmbedSyncedDocBlockComponent
-            );
-            block?.covertToInline();
-
-            // Clears
-            ctx.select('note');
-            ctx.reset();
-
-            ctx.track('SelectedView', {
-              ...trackBaseProps,
-              control: 'select view',
-              type: 'inline view',
-            });
-          },
-        },
-        {
-          id: 'card',
-          label: 'Card view',
-          run(ctx) {
-            const block = ctx.getCurrentBlockByType(
-              EmbedSyncedDocBlockComponent
-            );
-            block?.convertToCard();
-
-            ctx.track('SelectedView', {
-              ...trackBaseProps,
-              control: 'select view',
-              type: 'card view',
-            });
-          },
-        },
-        {
-          id: 'embed',
-          label: 'Embed view',
-          disabled: true,
-        },
-      ],
-      content(ctx) {
-        const model = ctx.getCurrentModelByType(EmbedSyncedDocModel);
-        if (!model) return null;
-
-        const actions = this.actions.map(action => ({ ...action }));
-        const onToggle = (e: CustomEvent<boolean>) => {
-          const opened = e.detail;
-          if (!opened) return;
-
-          ctx.track('OpenedViewSelector', {
-            ...trackBaseProps,
-            control: 'switch view',
-          });
-        };
-
-        return html`${keyed(
-          model,
-          html`<affine-view-dropdown-menu
-            @toggle=${onToggle}
-            .actions=${actions}
-            .context=${ctx}
-            .viewType$=${signal(actions[2].label)}
-          ></affine-view-dropdown-menu>`
-        )}`;
-      },
-    } satisfies ToolbarActionGroup<ToolbarAction>,
-    {
-      id: 'b.caption',
-      tooltip: 'Caption',
-      icon: CaptionIcon(),
+      id: 'inline',
+      label: 'Inline view',
       run(ctx) {
         const block = ctx.getCurrentBlockByType(EmbedSyncedDocBlockComponent);
-        block?.captionEditor?.show();
-        ctx.track('OpenedCaptionEditor', {
+        block?.convertToInline();
+
+        // Clears
+        ctx.select('note');
+        ctx.reset();
+
+        ctx.track('SelectedView', {
           ...trackBaseProps,
-          control: 'add caption',
+          control: 'select view',
+          type: 'inline view',
+        });
+      },
+      when: ctx => !ctx.hasSelectedSurfaceModels,
+    },
+    {
+      id: 'card',
+      label: 'Card view',
+      run(ctx) {
+        const block = ctx.getCurrentBlockByType(EmbedSyncedDocBlockComponent);
+        block?.convertToCard();
+
+        ctx.track('SelectedView', {
+          ...trackBaseProps,
+          control: 'select view',
+          type: 'card view',
         });
       },
     },
+    {
+      id: 'embed',
+      label: 'Embed view',
+      disabled: true,
+    },
+  ],
+  content(ctx) {
+    const model = ctx.getCurrentModelByType(EmbedSyncedDocModel);
+    if (!model) return null;
+
+    const actions = this.actions.map(action => ({ ...action }));
+    const viewType$ = signal('Embed view');
+    const onToggle = createOnToggleFn(ctx, 'OpenedViewSelector', 'switch view');
+
+    return html`${keyed(
+      model,
+      html`<affine-view-dropdown-menu
+        @toggle=${onToggle}
+        .actions=${actions}
+        .context=${ctx}
+        .viewType$=${viewType$}
+      ></affine-view-dropdown-menu>`
+    )}`;
+  },
+} as const satisfies ToolbarActionGroup<ToolbarAction>;
+
+const captionAction = {
+  id: 'c.caption',
+  tooltip: 'Caption',
+  icon: CaptionIcon(),
+  run(ctx) {
+    const block = ctx.getCurrentBlockByType(EmbedSyncedDocBlockComponent);
+    block?.captionEditor?.show();
+
+    ctx.track('OpenedCaptionEditor', {
+      ...trackBaseProps,
+      control: 'add caption',
+    });
+  },
+} as const satisfies ToolbarAction;
+
+const builtinToolbarConfig = {
+  actions: [
+    openDocActionGroup,
+    conversionsActionGroup,
+    captionAction,
     {
       placement: ActionPlacement.More,
       id: 'a.clipboard',
@@ -244,3 +252,79 @@ export const builtinToolbarConfig = {
     },
   ],
 } as const satisfies ToolbarModuleConfig;
+
+const builtinSurfaceToolbarConfig = {
+  actions: [
+    openDocActionGroup,
+    conversionsActionGroup,
+    captionAction,
+    {
+      id: 'd.scale',
+      content(ctx) {
+        const model = ctx.getCurrentBlockByType(
+          EmbedSyncedDocBlockComponent
+        )?.model;
+        if (!model) return null;
+
+        const scale$ = computed(() =>
+          Math.round(100 * (model.props.scale$.value ?? 1))
+        );
+        const onSelect = (e: CustomEvent<number>) => {
+          e.stopPropagation();
+
+          const scale = e.detail / 100;
+
+          const oldScale = model.props.scale ?? 1;
+          const ratio = scale / oldScale;
+          const bounds = Bound.deserialize(model.xywh);
+          bounds.h *= ratio;
+          bounds.w *= ratio;
+          const xywh = bounds.serialize();
+
+          ctx.store.updateBlock(model, { scale, xywh });
+
+          ctx.track('SelectedCardScale', {
+            ...trackBaseProps,
+            control: 'select card scale',
+          });
+        };
+        const onToggle = createOnToggleFn(
+          ctx,
+          'OpenedCardScaleSelector',
+          'switch card scale'
+        );
+        const format = (value: number) => `${value}%`;
+
+        return html`${keyed(
+          model,
+          html`<affine-size-dropdown-menu
+            @select=${onSelect}
+            @toggle=${onToggle}
+            .format=${format}
+            .size$=${scale$}
+          ></affine-size-dropdown-menu>`
+        )}`;
+      },
+    },
+  ],
+
+  when: ctx => ctx.getSurfaceModelsByType(EmbedSyncedDocModel).length === 1,
+} as const satisfies ToolbarModuleConfig;
+
+export const createBuiltinToolbarConfigExtension = (
+  flavour: string
+): ExtensionType[] => {
+  const name = flavour.split(':').pop();
+
+  return [
+    ToolbarModuleExtension({
+      id: BlockFlavourIdentifier(flavour),
+      config: builtinToolbarConfig,
+    }),
+
+    ToolbarModuleExtension({
+      id: BlockFlavourIdentifier(`affine:surface:${name}`),
+      config: builtinSurfaceToolbarConfig,
+    }),
+  ];
+};

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

@@ -306,7 +306,7 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
     ]);
   };
 
-  covertToInline = () => {
+  convertToInline = () => {
     const { doc } = this.model;
     const parent = doc.getParent(this.model);
     if (!parent) {

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

@@ -1,15 +1,10 @@
 import { EmbedSyncedDocBlockSchema } from '@blocksuite/affine-model';
-import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services';
-import {
-  BlockServiceIdentifier,
-  BlockViewExtension,
-  FlavourExtension,
-} from '@blocksuite/block-std';
+import { BlockViewExtension, FlavourExtension } from '@blocksuite/block-std';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
 import { EmbedSyncedDocBlockAdapterExtensions } from './adapters/extension';
-import { builtinToolbarConfig } from './configs/toolbar';
+import { createBuiltinToolbarConfigExtension } from './configs/toolbar';
 import { EmbedSyncedDocBlockService } from './embed-synced-doc-service';
 
 const flavour = EmbedSyncedDocBlockSchema.model.flavour;
@@ -23,8 +18,5 @@ export const EmbedSyncedDocBlockSpec: ExtensionType[] = [
       : literal`affine-embed-synced-doc-block`;
   }),
   EmbedSyncedDocBlockAdapterExtensions,
-  ToolbarModuleExtension({
-    id: BlockServiceIdentifier(flavour),
-    config: builtinToolbarConfig,
-  }),
+  createBuiltinToolbarConfigExtension(flavour),
 ].flat();