chore(editor): add table and callout entries for mobile (#13245)

Close
[AF-2755](https://linear.app/affine-design/issue/AF-2755/table-block支持)

#### PR Dependency Tree


* **PR #13245** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* Added "Table" and "Callout" options to the keyboard toolbar, allowing
users to insert table and callout blocks directly from the toolbar when
available.

* **Chores**
* Updated internal dependencies to support new block types and maintain
compatibility.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/widgets/keyboard-toolbar/package.json

@@ -20,6 +20,7 @@
     "@blocksuite/affine-block-paragraph": "workspace:*",
     "@blocksuite/affine-block-surface": "workspace:*",
     "@blocksuite/affine-block-surface-ref": "workspace:*",
+    "@blocksuite/affine-block-table": "workspace:*",
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-ext-loader": "workspace:*",
     "@blocksuite/affine-fragment-doc-title": "workspace:*",

blocksuite/affine/widgets/keyboard-toolbar/src/config.ts

@@ -18,6 +18,7 @@ import {
 } from '@blocksuite/affine-block-paragraph';
 import { DefaultTool, getSurfaceBlock } from '@blocksuite/affine-block-surface';
 import { insertSurfaceRefBlockCommand } from '@blocksuite/affine-block-surface-ref';
+import { insertTableBlockCommand } from '@blocksuite/affine-block-table';
 import { toggleEmbedCardCreateModal } from '@blocksuite/affine-components/embed-card-modal';
 import { toast } from '@blocksuite/affine-components/toast';
 import { insertInlineLatex } from '@blocksuite/affine-inline-latex';
@@ -40,14 +41,20 @@ import {
   deleteSelectedModelsCommand,
   draftSelectedModelsCommand,
   duplicateSelectedModelsCommand,
+  focusBlockEnd,
   getBlockSelectionsCommand,
   getSelectedModelsCommand,
   getTextSelectionCommand,
 } from '@blocksuite/affine-shared/commands';
 import { REFERENCE_NODE } from '@blocksuite/affine-shared/consts';
+import {
+  FeatureFlagService,
+  TelemetryProvider,
+} from '@blocksuite/affine-shared/services';
 import type { AffineTextStyleAttributes } from '@blocksuite/affine-shared/types';
 import {
   createDefaultDoc,
+  isInsideBlockByFlavour,
   openSingleFileWith,
   type Signal,
 } from '@blocksuite/affine-shared/utils';
@@ -87,6 +94,7 @@ import {
   RedoIcon,
   RightTabIcon,
   StrikeThroughIcon,
+  TableIcon,
   TeXIcon,
   TextIcon,
   TodayIcon,
@@ -258,6 +266,62 @@ const textToolActionItems: KeyboardToolbarActionItem[] = [
         .run();
     },
   },
+  {
+    name: 'Table',
+    icon: TableIcon(),
+    showWhen: ({ std, rootComponent: { model } }) =>
+      std.store.schema.flavourSchemaMap.has('affine:table') &&
+      !isInsideBlockByFlavour(std.store, model, 'affine:edgeless-text'),
+    action: ({ std }) => {
+      std.command
+        .chain()
+        .pipe(getSelectedModelsCommand)
+        .pipe(insertTableBlockCommand, {
+          place: 'after',
+          removeEmptyLine: true,
+        })
+        .pipe(({ insertedTableBlockId }) => {
+          if (insertedTableBlockId) {
+            const telemetry = std.getOptional(TelemetryProvider);
+            telemetry?.track('BlockCreated', {
+              blockType: 'affine:table',
+            });
+          }
+        })
+        .run();
+    },
+  },
+  {
+    name: 'Callout',
+    icon: FontIcon(),
+    showWhen: ({ std, rootComponent: { model } }) => {
+      return (
+        std.get(FeatureFlagService).getFlag('enable_callout') &&
+        !isInsideBlockByFlavour(model.store, model, 'affine:edgeless-text')
+      );
+    },
+    action: ({ rootComponent: { model }, std }) => {
+      const { store } = model;
+      const parent = store.getParent(model);
+      if (!parent) return;
+
+      const index = parent.children.indexOf(model);
+      if (index === -1) return;
+      const calloutId = store.addBlock('affine:callout', {}, parent, index + 1);
+      if (!calloutId) return;
+      const paragraphId = store.addBlock('affine:paragraph', {}, calloutId);
+      if (!paragraphId) return;
+      std.host.updateComplete
+        .then(() => {
+          const paragraph = std.view.getBlock(paragraphId);
+          if (!paragraph) return;
+          std.command.exec(focusBlockEnd, {
+            focusBlock: paragraph,
+          });
+        })
+        .catch(console.error);
+    },
+  },
 ];
 
 const listToolActionItems: KeyboardToolbarActionItem[] = [

blocksuite/affine/widgets/keyboard-toolbar/tsconfig.json

@@ -17,6 +17,7 @@
     { "path": "../../blocks/paragraph" },
     { "path": "../../blocks/surface" },
     { "path": "../../blocks/surface-ref" },
+    { "path": "../../blocks/table" },
     { "path": "../../components" },
     { "path": "../../ext-loader" },
     { "path": "../../fragments/doc-title" },

tools/utils/src/workspace.gen.ts

@@ -979,6 +979,7 @@ export const PackageList = [
       'blocksuite/affine/blocks/paragraph',
       'blocksuite/affine/blocks/surface',
       'blocksuite/affine/blocks/surface-ref',
+      'blocksuite/affine/blocks/table',
       'blocksuite/affine/components',
       'blocksuite/affine/ext-loader',
       'blocksuite/affine/fragments/doc-title',

yarn.lock

@@ -4007,6 +4007,7 @@ __metadata:
     "@blocksuite/affine-block-paragraph": "workspace:*"
     "@blocksuite/affine-block-surface": "workspace:*"
     "@blocksuite/affine-block-surface-ref": "workspace:*"
+    "@blocksuite/affine-block-table": "workspace:*"
     "@blocksuite/affine-components": "workspace:*"
     "@blocksuite/affine-ext-loader": "workspace:*"
     "@blocksuite/affine-fragment-doc-title": "workspace:*"