feat: refine image toolbar widget

[donteatfriedrice]

• Split ask-ai-button and action panel into independent components to support reuse
• Transform the image toolbar to support adding custom buttons

  config: ImageConfigItem[] = [];

  moreMenuConfig: MoreMenuConfigItem[] = [];

  clearConfig = () => {
    this.config = [];
    this.moreMenuConfig = [];
    return this;
  };

  addConfigItems = (item: ImageConfigItem[], index?: number) => {
    if (index === undefined) {
      this.config.push(...item);
      return this;
    }

    this.config.splice(index, 0, ...item);
    return this;
  };

  addMoreMenuItems = (item: MoreMenuConfigItem[], index?: number) => {
    if (index === undefined) {
      this.moreMenuConfig.push(...item);
      return this;
    }

    this.moreMenuConfig.splice(index, 0, ...item);
    return this;
  };

  buildDefaultConfig = () => {
    this.clearConfig()
      .addConfigItems(commonConfig)
      .addMoreMenuItems(moreMenuConfig);
    return this;
  };

export function setupImageToolbarEntry(imageToolbar: AffineImageToolbarWidget) {
  imageToolbar.buildDefaultConfig();
  imageToolbar.addConfigItems(
    [
      {
        type: 'custom',
        render(imageBlock: ImageBlockComponent) {
          return html`<ask-ai-button
            class="image-toolbar-button ask-ai"
            .host=${imageBlock.host}
            .actionGroups=${AIImageItemGroups}
            .size=${'small'}
            .backgroundColor=${'var(--affine-white)'}
            .boxShadow=${'var(--affine-shadow-1)'}
          ></ask-ai-button>`;
        },
        showWhen: () => true,
      },
    ],
    0
  );
}

export const AIImageBlockSpec: BlockSpec = {
  ...ImageBlockSpec,
  setup(slots, disposableGroup) {
    ImageBlockSpec.setup?.(slots, disposableGroup);
    slots.widgetConnected.on(view => {
      if (view.component instanceof AffineImageToolbarWidget) {
        setupImageToolbarEntry(view.component);
      }
    });
  },
};

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
blocksuite	❌ Failed (Inspect)			May 21, 2024 10:38am

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
blocksuite-docs	⬜️ Ignored (Inspect)	Visit Preview		May 21, 2024 10:38am

[graphite-app]

Your org has enabled the Graphite merge queue for merging into master

Add the label “merge” to the PR and Graphite will automatically add it to the merge queue when it’s ready to merge.

You must have a Graphite account and log in to Graphite in order to use the merge queue. Sign up using this link.

[graphite-app]

Merge activity

• May 21, 5:06 AM EDT: The merge label 'merge' was detected. This PR will be added to the Graphite merge queue once it meets the requirements.
• May 21, 6:21 AM EDT: donteatfriedrice added this pull request to the Graphite merge queue.
• May 21, 6:36 AM EDT: donteatfriedrice merged this pull request with the Graphite merge queue.