Close [BS-2744](https://linear.app/affine-design/issue/BS-2744/slash-menu%E6%8F%92%E4%BB%B6%E5%8C%96%EF%BC%9Aaction%E6%B3%A8%E5%86%8C%E5%85%A5%E5%8F%A3)
This PR mainly focus on providing an entry point for configuring the SlashMenu feature. Therefore, it strives to retain the original code to ensure that the modifications are simple and easy to review. Subsequent PRs will focus on moving different configurations into separate blocks.
### How to use?
Here is the type definition for the slash menu configuration. An important change is the new field `group`, which indicates the sorting and grouping of the menu item. See the comments for details.
```ts
// types.ts
export type SlashMenuContext = {
std: BlockStdScope;
model: BlockModel;
};
export type SlashMenuItemBase = {
name: string;
description?: string;
icon?: TemplateResult;
/**
* This field defines sorting and grouping of menu items like VSCode.
* The first number indicates the group index, the second number indicates the item index in the group.
* The group name is the string between `_` and `@`.
* You can find an example figure in https://code.visualstudio.com/api/references/contribution-points#menu-example
*/
group?: `${number}_${string}@${number}`;
/**
* The condition to show the menu item.
*/
when?: (ctx: SlashMenuContext) => boolean;
};
export type SlashMenuActionItem = SlashMenuItemBase & {
action: (ctx: SlashMenuContext) => void;
tooltip?: SlashMenuTooltip;
/**
* The alias of the menu item for search.
*/
searchAlias?: string[];
};
export type SlashMenuSubMenu = SlashMenuItemBase & {
subMenu: SlashMenuItem[];
};
export type SlashMenuItem = SlashMenuActionItem | SlashMenuSubMenu;
export type SlashMenuConfig = {
/**
* The items in the slash menu. It can be generated dynamically with the context.
*/
items: SlashMenuItem[] | ((ctx: SlashMenuContext) => SlashMenuItem[]);
/**
* Slash menu will not be triggered when the condition is true.
*/
disableWhen?: (ctx: SlashMenuContext) => boolean;
};
// extensions.ts
/**
* The extension to add a slash menu items or configure.
*/
export function SlashMenuConfigExtension(ext: {
id: string;
config: SlashMenuConfig;
}): ExtensionType {
return {
setup: di => {
di.addImpl(SlashMenuConfigIdentifier(ext.id), ext.config);
},
};
}
```
Here is an example, `XXXSlashMenuConfig` adds a `Delete` action to the slash menu, which is assigned to the 8th group named `Actions` at position 0.
```ts
import { SlashMenuConfigExtension, type SlashMenuConfig } from '@blocksuite/affine-widget-slash-menu';
const XXXSlashMenuConfig = SlashMenuConfigExtension({
id: 'XXX',
config: {
items: [
{
name: 'Delete',
description: 'Remove a block.',
searchAlias: ['remove'],
icon: DeleteIcon,
group: '8_Actions@0',
action: ({ std, model }) => {
std.host.doc.deleteBlock(model);
},
},
],
},
});
```
Close [BS-2751](https://linear.app/affine-design/issue/BS-2751).
### What Changed?
- Do not send AI gql request when chat-panel is not open.
- When the chat-panel width is greater than 540px, adjust the padding to 24px.
- Optimize the display and hide logic of scroll to end button.
Issue：Close [BS-2150](https://linear.app/affine-design/issue/BS-2150/图片-filterprocessing-二级菜单时而不出现)
In the AI image menu (based on floating-ui):
- **Floating element**: Submenu items (e.g., "image filter/image processing")
- **Reference element**: Menu item
- **Positioning strategy**: `fixed`
- **Issue**: Specifying the `container` parameter caused the floating element (submenu) to be mounted to the reference element (menu item), leading to incorrect position calculations when floating-ui updated.
```jsx
<menu-item>
<submenu-item style={{ position: 'fixed' }}/>
</menu-item>
```
- **Fix**: Remove the `container` configuration and mount the `fixed`-positioned floating element to the `body` instead.
