From 05a6845962080190a94ac223b701ea55a3f2edae Mon Sep 17 00:00:00 2001
From: L-Sun <zover.v@gmail.com>
Date: Fri, 7 Mar 2025 15:22:41 +0000
Subject: [PATCH] refactor(editor): data view slash menu config extension
 (#10684)

---
 .../affine/block-data-view/package.json       |  1 +
 .../block-data-view/src/configs/slash-menu.ts | 51 +++++++++++++++++++
 .../block-data-view/src/configs/tooltips.ts   | 16 ++++++
 .../affine/block-data-view/tsconfig.json      |  1 +
 tools/utils/src/workspace.gen.ts              |  1 +
 yarn.lock                                     |  1 +
 6 files changed, 71 insertions(+)
 create mode 100644 blocksuite/affine/block-data-view/src/configs/slash-menu.ts
 create mode 100644 blocksuite/affine/block-data-view/src/configs/tooltips.ts

diff --git a/blocksuite/affine/block-data-view/package.json b/blocksuite/affine/block-data-view/package.json
index 3bdb100951..b341c03b17 100644
--- a/blocksuite/affine/block-data-view/package.json
+++ b/blocksuite/affine/block-data-view/package.json
@@ -17,6 +17,7 @@
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/affine-widget-slash-menu": "workspace:*",
     "@blocksuite/block-std": "workspace:*",
     "@blocksuite/data-view": "workspace:*",
     "@blocksuite/global": "workspace:*",
diff --git a/blocksuite/affine/block-data-view/src/configs/slash-menu.ts b/blocksuite/affine/block-data-view/src/configs/slash-menu.ts
new file mode 100644
index 0000000000..0a9f4e8bfc
--- /dev/null
+++ b/blocksuite/affine/block-data-view/src/configs/slash-menu.ts
@@ -0,0 +1,51 @@
+import { FeatureFlagService } from '@blocksuite/affine-shared/services';
+import { isInsideBlockByFlavour } from '@blocksuite/affine-shared/utils';
+import { type SlashMenuConfig } from '@blocksuite/affine-widget-slash-menu';
+import { DatabaseTableViewIcon } from '@blocksuite/icons/lit';
+
+import type { DataViewBlockComponent } from '../data-view-block';
+import { ToDoListTooltip } from './tooltips';
+
+export const dataViewSlashMenuConfig: SlashMenuConfig = {
+  disableWhen: ({ model }) => {
+    return model.flavour === 'affine:data-view';
+  },
+  items: [
+    {
+      name: 'Todo',
+      searchAlias: ['todo view'],
+      icon: DatabaseTableViewIcon(),
+      tooltip: {
+        figure: ToDoListTooltip,
+        caption: 'To-do List',
+      },
+      group: '7_Database@1',
+      when: ({ model, std }) =>
+        !isInsideBlockByFlavour(model.doc, model, 'affine:edgeless-text') &&
+        !!std.get(FeatureFlagService).getFlag('enable_block_query'),
+
+      action: ({ model, std }) => {
+        const { host } = std;
+        const parent = host.doc.getParent(model);
+        if (!parent) return;
+        const index = parent.children.indexOf(model);
+        const id = host.doc.addBlock(
+          'affine:data-view',
+          {},
+          host.doc.getParent(model),
+          index + 1
+        );
+        const dataViewModel = host.doc.getBlock(id)!;
+
+        const dataView = std.view.getBlock(
+          dataViewModel.id
+        ) as DataViewBlockComponent | null;
+        dataView?.dataSource.viewManager.viewAdd('table');
+
+        if (model.text?.length === 0) {
+          model.doc.deleteBlock(model);
+        }
+      },
+    },
+  ],
+};
diff --git a/blocksuite/affine/block-data-view/src/configs/tooltips.ts b/blocksuite/affine/block-data-view/src/configs/tooltips.ts
new file mode 100644
index 0000000000..541d6acdbc
--- /dev/null
+++ b/blocksuite/affine/block-data-view/src/configs/tooltips.ts
@@ -0,0 +1,16 @@
+import { html } from 'lit';
+
+// prettier-ignore
+export const ToDoListTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="170" height="68" rx="2" fill="white"/>
+<mask id="mask0_16460_960" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
+<rect width="170" height="68" rx="2" fill="white"/>
+</mask>
+<g mask="url(#mask0_16460_960)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6667 19C12.7462 19 12 19.7462 12 20.6667V27.3333C12 28.2538 12.7462 29 13.6667 29H20.3333C21.2538 29 22 28.2538 22 27.3333V20.6667C22 19.7462 21.2538 19 20.3333 19H13.6667ZM12.9091 20.6667C12.9091 20.2483 13.2483 19.9091 13.6667 19.9091H20.3333C20.7517 19.9091 21.0909 20.2483 21.0909 20.6667V27.3333C21.0909 27.7517 20.7517 28.0909 20.3333 28.0909H13.6667C13.2483 28.0909 12.9091 27.7517 12.9091 27.3333V20.6667Z" fill="#77757D"/>
+<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="28" y="27.6364">Here is an example of todo list.</tspan></text>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 40.6667C12 39.7462 12.7462 39 13.6667 39H20.3333C21.2538 39 22 39.7462 22 40.6667V47.3333C22 48.2538 21.2538 49 20.3333 49H13.6667C12.7462 49 12 48.2538 12 47.3333V40.6667ZM19.7457 42.5032C19.9232 42.3257 19.9232 42.0379 19.7457 41.8604C19.5681 41.6829 19.2803 41.6829 19.1028 41.8604L16.0909 44.8723L15.2002 43.9816C15.0227 43.8041 14.7349 43.8041 14.5574 43.9816C14.3799 44.1591 14.3799 44.4469 14.5574 44.6244L15.7695 45.8366C15.947 46.0141 16.2348 46.0141 16.4123 45.8366L19.7457 42.5032Z" fill="#1E96EB"/>
+<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="28" y="47.6364">Make a list for building preview.</tspan></text>
+</g>
+</svg>
+`;
diff --git a/blocksuite/affine/block-data-view/tsconfig.json b/blocksuite/affine/block-data-view/tsconfig.json
index 2642e82451..0fad6ab334 100644
--- a/blocksuite/affine/block-data-view/tsconfig.json
+++ b/blocksuite/affine/block-data-view/tsconfig.json
@@ -11,6 +11,7 @@
     { "path": "../components" },
     { "path": "../model" },
     { "path": "../shared" },
+    { "path": "../widget-slash-menu" },
     { "path": "../../framework/block-std" },
     { "path": "../data-view" },
     { "path": "../../framework/global" },
diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts
index 9584d2d59b..7434c95989 100644
--- a/tools/utils/src/workspace.gen.ts
+++ b/tools/utils/src/workspace.gen.ts
@@ -82,6 +82,7 @@ export const PackageList = [
       'blocksuite/affine/components',
       'blocksuite/affine/model',
       'blocksuite/affine/shared',
+      'blocksuite/affine/widget-slash-menu',
       'blocksuite/framework/block-std',
       'blocksuite/affine/data-view',
       'blocksuite/framework/global',
diff --git a/yarn.lock b/yarn.lock
index 75a2bd77ab..392bdc6fb6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2326,6 +2326,7 @@ __metadata:
     "@blocksuite/affine-components": "workspace:*"
     "@blocksuite/affine-model": "workspace:*"
     "@blocksuite/affine-shared": "workspace:*"
+    "@blocksuite/affine-widget-slash-menu": "workspace:*"
     "@blocksuite/block-std": "workspace:*"
     "@blocksuite/data-view": "workspace:*"
     "@blocksuite/global": "workspace:*"