refactor(editor): edgeless bookmark toolbar config extension (#10711)

2025-03-19 02:24:26 +00:00
parent 70fe521300
commit d8567e669a
17 changed files with 537 additions and 101 deletions
--- a/blocksuite/affine/blocks/block-bookmark/package.json
+++ b/blocksuite/affine/blocks/block-bookmark/package.json
@@ -11,6 +11,7 @@
  "license": "MIT",
  "dependencies": {
    "@blocksuite/affine-block-embed": "workspace:*",
+    "@blocksuite/affine-block-surface": "workspace:*",
    "@blocksuite/affine-components": "workspace:*",
    "@blocksuite/affine-model": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
--- a/blocksuite/affine/blocks/block-bookmark/src/bookmark-spec.ts
+++ b/blocksuite/affine/blocks/block-bookmark/src/bookmark-spec.ts
@@ -1,16 +1,11 @@
 import { BookmarkBlockSchema } from '@blocksuite/affine-model';
-import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services';
-import {
-  BlockFlavourIdentifier,
-  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 { BookmarkBlockAdapterExtensions } from './adapters/extension';
 import { BookmarkSlashMenuConfigExtension } from './configs/slash-menu';
-import { builtinToolbarConfig } from './configs/toolbar';
+import { createBuiltinToolbarConfigExtension } from './configs/toolbar';

 const flavour = BookmarkBlockSchema.model.flavour;

@@ -22,9 +17,6 @@ export const BookmarkBlockSpec: ExtensionType[] = [
      : literal`affine-bookmark`;
  }),
  BookmarkBlockAdapterExtensions,
-  ToolbarModuleExtension({
-    id: BlockFlavourIdentifier(flavour),
-    config: builtinToolbarConfig,
-  }),
+  createBuiltinToolbarConfigExtension(flavour),
  BookmarkSlashMenuConfigExtension,
 ].flat();
--- a/blocksuite/affine/blocks/block-bookmark/src/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/block-bookmark/src/configs/toolbar.ts
@@ -1,16 +1,29 @@
 import { EmbedIframeService } from '@blocksuite/affine-block-embed';
+import { reassociateConnectorsCommand } from '@blocksuite/affine-block-surface';
 import { toast } from '@blocksuite/affine-components/toast';
-import { BookmarkBlockModel } from '@blocksuite/affine-model';
+import {
+  BookmarkBlockModel,
+  BookmarkStyles,
+  type EmbedCardStyle,
+} from '@blocksuite/affine-model';
+import {
+  EMBED_CARD_HEIGHT,
+  EMBED_CARD_WIDTH,
+} from '@blocksuite/affine-shared/consts';
 import {
  ActionPlacement,
  EmbedOptionProvider,
  FeatureFlagService,
+  type LinkEventType,
  type ToolbarAction,
  type ToolbarActionGroup,
+  type ToolbarContext,
  type ToolbarModuleConfig,
+  ToolbarModuleExtension,
 } from '@blocksuite/affine-shared/services';
 import { getBlockProps } from '@blocksuite/affine-shared/utils';
-import { BlockSelection } from '@blocksuite/block-std';
+import { BlockFlavourIdentifier, BlockSelection } from '@blocksuite/block-std';
+import { Bound } from '@blocksuite/global/gfx';
 import {
  CaptionIcon,
  CopyIcon,
@@ -18,8 +31,8 @@ import {
  DuplicateIcon,
  ResetIcon,
 } from '@blocksuite/icons/lit';
-import { Slice, Text } from '@blocksuite/store';
-import { signal } from '@preact/signals-core';
+import { type ExtensionType, Slice, Text } from '@blocksuite/store';
+import { computed, signal } from '@preact/signals-core';
 import { html } from 'lit';
 import { keyed } from 'lit/directives/keyed.js';
 import * as Y from 'yjs';
@@ -27,26 +40,62 @@ import * as Y from 'yjs';
 import { BookmarkBlockComponent } from '../bookmark-block';

 const trackBaseProps = {
-  segment: 'doc',
-  page: 'doc editor',
-  module: 'toolbar',
  category: 'bookmark',
  type: 'card view',
 };

-export const builtinToolbarConfig = {
+const previewAction = {
+  id: 'a.preview',
+  content(ctx) {
+    const model = ctx.getCurrentModelByType(BookmarkBlockModel);
+    if (!model) return null;
+
+    const { url } = model.props;
+
+    return html`<affine-link-preview .url=${url}></affine-link-preview>`;
+  },
+} satisfies ToolbarAction;
+
+const captionAction = {
+  id: 'd.caption',
+  tooltip: 'Caption',
+  icon: CaptionIcon(),
+  run(ctx) {
+    const block = ctx.getCurrentBlockByType(BookmarkBlockComponent);
+    block?.captionEditor?.show();
+
+    ctx.track('OpenedCaptionEditor', {
+      ...trackBaseProps,
+      control: 'add caption',
+    });
+  },
+} satisfies ToolbarAction;
+
+const createOnToggleFn =
+  (
+    ctx: ToolbarContext,
+    name: Extract<
+      LinkEventType,
+      | 'OpenedViewSelector'
+      | 'OpenedCardStyleSelector'
+      | 'OpenedCardScaleSelector'
+    >,
+    control: string
+  ) =>
+  (e: CustomEvent<boolean>) => {
+    e.stopPropagation();
+    const opened = e.detail;
+    if (!opened) return;
+
+    ctx.track(name, {
+      ...trackBaseProps,
+      control,
+    });
+  };
+
+const builtinToolbarConfig = {
  actions: [
-    {
-      id: 'a.preview',
-      content(ctx) {
-        const model = ctx.getCurrentModelByType(BookmarkBlockModel);
-        if (!model) return null;
-
-        const { url } = model.props;
-
-        return html`<affine-link-preview .url=${url}></affine-link-preview>`;
-      },
-    },
+    previewAction,
    {
      id: 'b.conversions',
      actions: [
@@ -181,15 +230,12 @@ export const builtinToolbarConfig = {
        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',
-          });
-        };
+        const viewType$ = signal(actions[1].label);
+        const onToggle = createOnToggleFn(
+          ctx,
+          'OpenedViewSelector',
+          'switch view'
+        );

        return html`${keyed(
          model,
@@ -197,7 +243,7 @@ export const builtinToolbarConfig = {
            @toggle=${onToggle}
            .actions=${actions}
            .context=${ctx}
-            .viewType$=${signal(actions[1].label)}
+            .viewType$=${viewType$}
          ></affine-view-dropdown-menu>`
        )}`;
      },
@@ -230,16 +276,11 @@ export const builtinToolbarConfig = {
            });
          },
        })) satisfies ToolbarAction[];
-
-        const onToggle = (e: CustomEvent<boolean>) => {
-          const opened = e.detail;
-          if (!opened) return;
-
-          ctx.track('OpenedCardStyleSelector', {
-            ...trackBaseProps,
-            control: 'switch card style',
-          });
-        };
+        const onToggle = createOnToggleFn(
+          ctx,
+          'OpenedCardStyleSelector',
+          'switch card style'
+        );

        return html`${keyed(
          model,
@@ -252,20 +293,7 @@ export const builtinToolbarConfig = {
        )}`;
      },
    } satisfies ToolbarActionGroup<ToolbarAction>,
-    {
-      id: 'd.caption',
-      tooltip: 'Caption',
-      icon: CaptionIcon(),
-      run(ctx) {
-        const block = ctx.getCurrentBlockByType(BookmarkBlockComponent);
-        block?.captionEditor?.show();
-
-        ctx.track('OpenedCaptionEditor', {
-          ...trackBaseProps,
-          control: 'add caption',
-        });
-      },
-    },
+    captionAction,
    {
      placement: ActionPlacement.More,
      id: 'a.clipboard',
@@ -331,3 +359,235 @@ export const builtinToolbarConfig = {
    },
  ],
 } as const satisfies ToolbarModuleConfig;
+
+const builtinSurfaceToolbarConfig = {
+  actions: [
+    previewAction,
+    {
+      id: 'b.conversions',
+      actions: [
+        {
+          id: 'card',
+          label: 'Card view',
+          disabled: true,
+        },
+        {
+          id: 'embed',
+          label: 'Embed view',
+          run(ctx) {
+            const model = ctx.getCurrentModelByType(BookmarkBlockModel);
+            if (!model) return;
+
+            const { id: oldId, xywh, parent } = model;
+            const { url, caption } = model.props;
+            const options = ctx.std
+              .get(EmbedOptionProvider)
+              .getEmbedBlockOptions(url);
+
+            if (options?.viewType !== 'embed') return;
+
+            const { flavour, styles } = options;
+            let { style } = model.props;
+
+            if (!styles.includes(style)) {
+              style = styles[0];
+            }
+
+            const bounds = Bound.deserialize(xywh);
+            bounds.w = EMBED_CARD_WIDTH[style];
+            bounds.h = EMBED_CARD_HEIGHT[style];
+
+            const newId = ctx.store.addBlock(
+              flavour,
+              { url, caption, style, xywh: bounds.serialize() },
+              parent
+            );
+
+            ctx.command.exec(reassociateConnectorsCommand, { oldId, newId });
+
+            ctx.store.deleteBlock(model);
+
+            // Selects new block
+            ctx.gfx.selection.set({ editing: false, elements: [newId] });
+
+            ctx.track('SelectedView', {
+              ...trackBaseProps,
+              control: 'select view',
+              type: 'embed view',
+            });
+          },
+        },
+      ],
+      when(ctx) {
+        const model = ctx.getCurrentModelByType(BookmarkBlockModel);
+        if (!model) return false;
+
+        const { url } = model.props;
+        const options = ctx.std
+          .get(EmbedOptionProvider)
+          .getEmbedBlockOptions(url);
+
+        return options?.viewType === 'embed';
+      },
+      content(ctx) {
+        const model = ctx.getCurrentModelByType(BookmarkBlockModel);
+        if (!model) return null;
+
+        const actions = this.actions.map(action => ({ ...action }));
+        const viewType$ = signal('Card 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>`
+        )}`;
+      },
+    } satisfies ToolbarActionGroup<ToolbarAction>,
+    {
+      id: 'b.style',
+      actions: [
+        {
+          id: 'horizontal',
+          label: 'Large horizontal style',
+        },
+        {
+          id: 'list',
+          label: 'Small horizontal style',
+        },
+        {
+          id: 'vertical',
+          label: 'Large vertical style',
+        },
+        {
+          id: 'cube',
+          label: 'Small vertical style',
+        },
+      ].filter(action => BookmarkStyles.includes(action.id as EmbedCardStyle)),
+      content(ctx) {
+        const model = ctx.getCurrentModelByType(BookmarkBlockModel);
+        if (!model) return null;
+
+        const actions = this.actions.map(action => ({
+          ...action,
+          run: ({ store }) => {
+            const style = action.id as EmbedCardStyle;
+            const bounds = Bound.deserialize(model.xywh);
+            bounds.w = EMBED_CARD_WIDTH[style];
+            bounds.h = EMBED_CARD_HEIGHT[style];
+            const xywh = bounds.serialize();
+
+            store.updateBlock(model, { style, xywh });
+
+            ctx.track('SelectedCardStyle', {
+              ...trackBaseProps,
+              control: 'select card style',
+              type: style,
+            });
+          },
+        })) satisfies ToolbarAction[];
+        const style$ = model.props.style$;
+        const onToggle = createOnToggleFn(
+          ctx,
+          'OpenedCardStyleSelector',
+          'switch card style'
+        );
+
+        return html`${keyed(
+          model,
+          html`<affine-card-style-dropdown-menu
+            @toggle=${onToggle}
+            .actions=${actions}
+            .context=${ctx}
+            .style$=${style$}
+          ></affine-card-style-dropdown-menu>`
+        )}`;
+      },
+    } satisfies ToolbarActionGroup<ToolbarAction>,
+    {
+      ...captionAction,
+      id: 'c.caption',
+    },
+    {
+      id: 'd.scale',
+      content(ctx) {
+        const model = ctx.getCurrentModelByType(BookmarkBlockModel);
+        if (!model) return null;
+
+        const scale$ = computed(() => {
+          const {
+            xywh$: { value: xywh },
+          } = model;
+          const {
+            style$: { value: style },
+          } = model.props;
+          const bounds = Bound.deserialize(xywh);
+          const height = EMBED_CARD_HEIGHT[style];
+          return Math.round(100 * (bounds.h / height));
+        });
+        const onSelect = (e: CustomEvent<number>) => {
+          e.stopPropagation();
+
+          const scale = e.detail / 100;
+
+          const bounds = Bound.deserialize(model.xywh);
+          const style = model.props.style;
+          bounds.w = EMBED_CARD_WIDTH[style] * scale;
+          bounds.h = EMBED_CARD_HEIGHT[style] * scale;
+          const xywh = bounds.serialize();
+
+          ctx.store.updateBlock(model, { 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(BookmarkBlockModel).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,
+    }),
+  ];
+};
--- a/blocksuite/affine/blocks/block-bookmark/tsconfig.json
+++ b/blocksuite/affine/blocks/block-bookmark/tsconfig.json
@@ -8,6 +8,7 @@
  "include": ["./src"],
  "references": [
    { "path": "../block-embed" },
+    { "path": "../block-surface" },
    { "path": "../../components" },
    { "path": "../../model" },
    { "path": "../../shared" },
--- a/blocksuite/affine/blocks/block-root/src/edgeless/components/panel/scale-panel.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/components/panel/scale-panel.ts
@@ -13,6 +13,7 @@ function format(scale: number) {
  return `${scale}%`;
 }

+// TODO(@fundon): remove it after refacting is completed
 export class EdgelessScalePanel extends LitElement {
  static override styles = css`
    :host {
@@ -28,7 +29,7 @@ export class EdgelessScalePanel extends LitElement {
    }

    .scale-input {
-      display: flx;
+      display: flex;
      align-self: stretch;
      border: 0.5px solid var(--affine-border-color);
      border-radius: 8px;
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/bookmark.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/bookmark.ts
@@ -1,11 +0,0 @@
-import type { ToolbarModuleConfig } from '@blocksuite/affine-shared/services';
-
-export const builtinBookmarkToolbarConfig = {
-  actions: [
-    {
-      id: 'a.test',
-      label: 'Bookmark',
-      run() {},
-    },
-  ],
-} as const satisfies ToolbarModuleConfig;
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/index.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/index.ts
@@ -2,7 +2,6 @@ import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services';
 import { BlockFlavourIdentifier } from '@blocksuite/block-std';
 import type { ExtensionType } from '@blocksuite/store';

-import { builtinBookmarkToolbarConfig } from './bookmark';
 import { builtinBrushToolbarConfig } from './brush';
 import { builtinConnectorToolbarConfig } from './connector';
 import { builtinEmbedToolbarConfig } from './embed';
@@ -16,11 +15,6 @@ import { builtinShapeToolbarConfig } from './shape';
 import { builtinTextToolbarConfig } from './text';

 export const EdgelessElementToolbarExtension: ExtensionType[] = [
-  ToolbarModuleExtension({
-    id: BlockFlavourIdentifier('affine:surface:bookmark'),
-    config: builtinBookmarkToolbarConfig,
-  }),
-
  ToolbarModuleExtension({
    id: BlockFlavourIdentifier('affine:surface:image'),
    config: builtinImageToolbarConfig,