fix(editor): disable slash menu in callout (#10656)

blocksuite/affine/block-root/src/widgets/slash-menu/config.ts

@@ -88,6 +88,7 @@ import {
 export type SlashMenuConfig = {
   triggerKeys: string[];
   ignoreBlockTypes: string[];
+  ignoreSelector: string;
   items: SlashMenuItem[];
   maxHeight: number;
   tooltipTimeout: number;
@@ -142,6 +143,7 @@ export type SlashMenuContext = {
 export const defaultSlashMenuConfig: SlashMenuConfig = {
   triggerKeys: ['/'],
   ignoreBlockTypes: ['affine:code'],
+  ignoreSelector: 'affine-callout',
   maxHeight: 344,
   tooltipTimeout: 800,
   items: [

blocksuite/affine/block-root/src/widgets/slash-menu/index.ts

@@ -126,10 +126,13 @@ export class AffineSlashMenuWidget extends WidgetComponent {
       const textSelection = this.host.selection.find(TextSelection);
       if (!textSelection) return;
 
-      const model = this.host.doc.getBlock(textSelection.blockId)?.model;
+      const block = this.host.view.getBlock(textSelection.blockId);
-      if (!model) return;
+      if (!block) return;
+      const model = block.model;
 
-      if (this.config.ignoreBlockTypes.includes(model.flavour)) return;
+      if (block.closest(this.config.ignoreSelector)) return;
+
+      if (this.config.ignoreBlockTypes.includes(block.flavour)) return;
 
       const inlineRange = inlineEditor.getInlineRange();
       if (!inlineRange) return;
@@ -217,7 +220,6 @@ export class AffineSlashMenuWidget extends WidgetComponent {
       return;
     }
 
-    // this.handleEvent('beforeInput', this._onBeforeInput);
     this.handleEvent('keyDown', this._onKeyDown);
     this.handleEvent('compositionEnd', this._onCompositionEnd);
   }

tests/affine-local/e2e/blocksuite/callout/callout.spec.ts

@@ -1,10 +1,9 @@
+import { undoByKeyboard } from '@affine-test/kit/utils/keyboard';
 import { openHomePage } from '@affine-test/kit/utils/load-page';
 import { type } from '@affine-test/kit/utils/page-logic';
 import { expect, test } from '@playwright/test';
 
-test('add callout block using slash menu and change emoji', async ({
+test.beforeEach(async ({ page }) => {
-  page,
-}) => {
   await openHomePage(page);
   await page.getByTestId('settings-modal-trigger').click();
   await page.getByText('Experimental features').click();
@@ -14,7 +13,11 @@ test('add callout block using slash menu and change emoji', async ({
   await page.getByTestId('modal-close-button').click();
   await page.getByTestId('sidebar-new-page-button').click();
   await page.locator('affine-paragraph v-line div').click();
+});
 
+test('add callout block using slash menu and change emoji', async ({
+  page,
+}) => {
   await type(page, '/callout\naaaa\nbbbb');
   const callout = page.locator('affine-callout');
   const emoji = page.locator('affine-callout .affine-callout-emoji');
@@ -41,3 +44,19 @@ test('add callout block using slash menu and change emoji', async ({
   await expect(emojiMenu).not.toBeVisible();
   await expect(emoji).toContainText('😆');
 });
+
+test('disable slash menu in callout block', async ({ page }) => {
+  await type(page, '/callout\n');
+  const callout = page.locator('affine-callout');
+  const emoji = page.locator('affine-callout .affine-callout-emoji');
+  await expect(callout).toBeVisible();
+  await expect(emoji).toContainText('😀');
+
+  await type(page, '/');
+  const slashMenu = page.locator('.slash-menu');
+  await expect(slashMenu).not.toBeVisible();
+  await undoByKeyboard(page);
+  await undoByKeyboard(page);
+  await type(page, '/');
+  await expect(slashMenu).toBeVisible();
+});