mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-14 05:14:54 +00:00
refactor(editor): database slash menu config extension (#10670)
This commit is contained in:
L-Sun
@@ -17,6 +17,7 @@
|
||||
"@blocksuite/affine-model": "workspace:*",
|
||||
"@blocksuite/affine-shared": "workspace:*",
|
||||
"@blocksuite/affine-widget-drag-handle": "workspace:*",
|
||||
"@blocksuite/affine-widget-slash-menu": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/data-view": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
|
||||
83
blocksuite/affine/block-database/src/configs/slash-menu.ts
Normal file
83
blocksuite/affine/block-database/src/configs/slash-menu.ts
Normal file
@@ -0,0 +1,83 @@
|
||||
import { getSelectedModelsCommand } from '@blocksuite/affine-shared/commands';
|
||||
import { TelemetryProvider } from '@blocksuite/affine-shared/services';
|
||||
import { isInsideBlockByFlavour } from '@blocksuite/affine-shared/utils';
|
||||
import { type SlashMenuConfig } from '@blocksuite/affine-widget-slash-menu';
|
||||
import { viewPresets } from '@blocksuite/data-view/view-presets';
|
||||
import {
|
||||
DatabaseKanbanViewIcon,
|
||||
DatabaseTableViewIcon,
|
||||
} from '@blocksuite/icons/lit';
|
||||
|
||||
import { insertDatabaseBlockCommand } from '../commands';
|
||||
import { KanbanViewTooltip, TableViewTooltip } from './tooltips';
|
||||
|
||||
export const databaseSlashMenuConfig: SlashMenuConfig = {
|
||||
disableWhen: ({ model }) => model.flavour === 'affine:database',
|
||||
items: [
|
||||
{
|
||||
name: 'Table View',
|
||||
description: 'Display items in a table format.',
|
||||
searchAlias: ['database'],
|
||||
icon: DatabaseTableViewIcon(),
|
||||
tooltip: {
|
||||
figure: TableViewTooltip,
|
||||
caption: 'Table View',
|
||||
},
|
||||
group: '7_Database@0',
|
||||
when: ({ model }) =>
|
||||
!isInsideBlockByFlavour(model.doc, model, 'affine:edgeless-text'),
|
||||
action: ({ std }) => {
|
||||
std.command
|
||||
.chain()
|
||||
.pipe(getSelectedModelsCommand)
|
||||
.pipe(insertDatabaseBlockCommand, {
|
||||
viewType: viewPresets.tableViewMeta.type,
|
||||
place: 'after',
|
||||
removeEmptyLine: true,
|
||||
})
|
||||
.pipe(({ insertedDatabaseBlockId }) => {
|
||||
if (insertedDatabaseBlockId) {
|
||||
const telemetry = std.getOptional(TelemetryProvider);
|
||||
telemetry?.track('BlockCreated', {
|
||||
blockType: 'affine:database',
|
||||
});
|
||||
}
|
||||
})
|
||||
.run();
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Kanban View',
|
||||
description: 'Visualize data in a dashboard.',
|
||||
searchAlias: ['database'],
|
||||
icon: DatabaseKanbanViewIcon(),
|
||||
tooltip: {
|
||||
figure: KanbanViewTooltip,
|
||||
caption: 'Kanban View',
|
||||
},
|
||||
group: '7_Database@2',
|
||||
when: ({ model }) =>
|
||||
!isInsideBlockByFlavour(model.doc, model, 'affine:edgeless-text'),
|
||||
action: ({ std }) => {
|
||||
std.command
|
||||
.chain()
|
||||
.pipe(getSelectedModelsCommand)
|
||||
.pipe(insertDatabaseBlockCommand, {
|
||||
viewType: viewPresets.kanbanViewMeta.type,
|
||||
place: 'after',
|
||||
removeEmptyLine: true,
|
||||
})
|
||||
.pipe(({ insertedDatabaseBlockId }) => {
|
||||
if (insertedDatabaseBlockId) {
|
||||
const telemetry = std.getOptional(TelemetryProvider);
|
||||
telemetry?.track('BlockCreated', {
|
||||
blockType: 'affine:database',
|
||||
});
|
||||
}
|
||||
})
|
||||
.run();
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
@@ -84,3 +84,98 @@ export const TableViewTooltip = html`<svg width="170" height="106" viewBox="0 0
|
||||
</defs>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
// prettier-ignore
|
||||
export const KanbanViewTooltip = html`<svg width="170" height="106" viewBox="0 0 170 106" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="106" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_1185" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="106">
|
||||
<rect width="170" height="106" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_1185)">
|
||||
<rect x="8.5" y="26.5" width="169" height="84" rx="3.5" fill="white" stroke="#E3E2E4"/>
|
||||
<mask id="mask1_16460_1185" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="9" y="27" width="168" height="83">
|
||||
<rect x="9" y="27" width="168" height="83" rx="4" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask1_16460_1185)">
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="9" font-weight="500" letter-spacing="0em"><tspan x="18" y="42.7727">Untitled Kanban</tspan></text>
|
||||
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="18" y="55.8182">Ungroups</tspan></text>
|
||||
<rect x="84" y="50" width="31" height="8" rx="1" fill="#F3F0FF"/>
|
||||
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="86" y="55.8182">In Progress</tspan></text>
|
||||
<rect x="150" y="50" width="17" height="8" rx="1" fill="#DFF4E8"/>
|
||||
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="152" y="55.8182">Done</tspan></text>
|
||||
<rect x="16.25" y="60.25" width="59.5" height="53.5" rx="1.75" fill="white" stroke="#E3E2E4" stroke-width="0.5"/>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="21" y="68.8182">Task 5</tspan></text>
|
||||
<rect x="20" y="88" width="8" height="8" rx="1" fill="#EEEEEE"/>
|
||||
<g clip-path="url(#clip0_16460_1185)">
|
||||
<g clip-path="url(#clip1_16460_1185)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.8125 90C21.8125 89.8964 21.8964 89.8125 22 89.8125H26C26.1036 89.8125 26.1875 89.8964 26.1875 90V90.6667C26.1875 90.7702 26.1036 90.8542 26 90.8542C25.8964 90.8542 25.8125 90.7702 25.8125 90.6667V90.1875H24.1875V93.8125H25C25.1036 93.8125 25.1875 93.8964 25.1875 94C25.1875 94.1036 25.1036 94.1875 25 94.1875H23C22.8964 94.1875 22.8125 94.1036 22.8125 94C22.8125 93.8964 22.8964 93.8125 23 93.8125H23.8125V90.1875H22.1875V90.6667C22.1875 90.7702 22.1036 90.8542 22 90.8542C21.8964 90.8542 21.8125 90.7702 21.8125 90.6667V90Z" fill="#77757D"/>
|
||||
</g>
|
||||
</g>
|
||||
<rect x="82.25" y="60.25" width="59.5" height="53.5" rx="1.75" fill="white" stroke="#E3E2E4" stroke-width="0.5"/>
|
||||
<rect x="148.25" y="60.25" width="59.5" height="53.5" rx="1.75" fill="white" stroke="#E3E2E4" stroke-width="0.5"/>
|
||||
<line x1="16" y1="99.75" x2="76" y2="99.75" stroke="#E3E2E4" stroke-width="0.5"/>
|
||||
<line x1="82" y1="99.75" x2="142" y2="99.75" stroke="#E3E2E4" stroke-width="0.5"/>
|
||||
<line x1="148" y1="99.75" x2="208" y2="99.75" stroke="#E3E2E4" stroke-width="0.5"/>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="87" y="68.8182">Task 1</tspan></text>
|
||||
<rect x="86" y="88" width="8" height="8" rx="1" fill="#EEEEEE"/>
|
||||
<g clip-path="url(#clip2_16460_1185)">
|
||||
<g clip-path="url(#clip3_16460_1185)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M87.8125 90C87.8125 89.8964 87.8964 89.8125 88 89.8125H92C92.1036 89.8125 92.1875 89.8964 92.1875 90V90.6667C92.1875 90.7702 92.1036 90.8542 92 90.8542C91.8964 90.8542 91.8125 90.7702 91.8125 90.6667V90.1875H90.1875V93.8125H91C91.1036 93.8125 91.1875 93.8964 91.1875 94C91.1875 94.1036 91.1036 94.1875 91 94.1875H89C88.8964 94.1875 88.8125 94.1036 88.8125 94C88.8125 93.8964 88.8964 93.8125 89 93.8125H89.8125V90.1875H88.1875V90.6667C88.1875 90.7702 88.1036 90.8542 88 90.8542C87.8964 90.8542 87.8125 90.7702 87.8125 90.6667V90Z" fill="#77757D"/>
|
||||
</g>
|
||||
</g>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="153" y="68.8182">Task 4</tspan></text>
|
||||
<rect x="152" y="88" width="8" height="8" rx="1" fill="#EEEEEE"/>
|
||||
<g clip-path="url(#clip4_16460_1185)">
|
||||
<g clip-path="url(#clip5_16460_1185)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M153.812 90C153.812 89.8964 153.896 89.8125 154 89.8125H158C158.104 89.8125 158.188 89.8964 158.188 90V90.6667C158.188 90.7702 158.104 90.8542 158 90.8542C157.896 90.8542 157.812 90.7702 157.812 90.6667V90.1875H156.188V93.8125H157C157.104 93.8125 157.188 93.8964 157.188 94C157.188 94.1036 157.104 94.1875 157 94.1875H155C154.896 94.1875 154.812 94.1036 154.812 94C154.812 93.8964 154.896 93.8125 155 93.8125H155.812V90.1875H154.188V90.6667C154.188 90.7702 154.104 90.8542 154 90.8542C153.896 90.8542 153.812 90.7702 153.812 90.6667V90Z" fill="#77757D"/>
|
||||
</g>
|
||||
</g>
|
||||
<rect x="43" y="50" width="8" height="8" rx="1" fill="#F5F5F5"/>
|
||||
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="45.5" y="55.8182">1</tspan></text>
|
||||
<rect x="117" y="50" width="8" height="8" rx="1" fill="#F5F5F5"/>
|
||||
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="119.5" y="55.8182">1</tspan></text>
|
||||
<rect x="169" y="50" width="8" height="8" rx="1" fill="#F5F5F5"/>
|
||||
<rect x="86" y="103" width="31" height="8" rx="1" fill="#F3F0FF"/>
|
||||
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="88" y="108.818">In Progress</tspan></text>
|
||||
<rect x="152" y="103" width="17" height="8" rx="1" fill="#DFF4E8"/>
|
||||
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="154" y="108.818">Done</tspan></text>
|
||||
</g>
|
||||
<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="16.6364">Visualize data in a dashboard.</tspan></text>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_16460_1185">
|
||||
<rect width="6" height="6" fill="white" transform="translate(21 89)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_16460_1185">
|
||||
<rect width="6" height="6" fill="white" transform="translate(21 89)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip2_16460_1185">
|
||||
<rect width="6" height="6" fill="white" transform="translate(87 89)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip3_16460_1185">
|
||||
<rect width="6" height="6" fill="white" transform="translate(87 89)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip4_16460_1185">
|
||||
<rect width="6" height="6" fill="white" transform="translate(153 89)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip5_16460_1185">
|
||||
<rect width="6" height="6" fill="white" transform="translate(153 89)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
// 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>
|
||||
`;
|
||||
@@ -1,11 +1,14 @@
|
||||
import { SlashMenuConfigExtension } from '@blocksuite/affine-widget-slash-menu';
|
||||
import { BlockViewExtension, FlavourExtension } from '@blocksuite/block-std';
|
||||
import type { ExtensionType } from '@blocksuite/store';
|
||||
import { literal } from 'lit/static-html.js';
|
||||
|
||||
import { DatabaseBlockAdapterExtensions } from './adapters/extension.js';
|
||||
import { databaseSlashMenuConfig } from './configs/slash-menu.js';
|
||||
|
||||
export const DatabaseBlockSpec: ExtensionType[] = [
|
||||
FlavourExtension('affine:database'),
|
||||
BlockViewExtension('affine:database', literal`affine-database`),
|
||||
DatabaseBlockAdapterExtensions,
|
||||
SlashMenuConfigExtension('affine:database', databaseSlashMenuConfig),
|
||||
].flat();
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
{ "path": "../model" },
|
||||
{ "path": "../shared" },
|
||||
{ "path": "../widget-drag-handle" },
|
||||
{ "path": "../widget-slash-menu" },
|
||||
{ "path": "../../framework/block-std" },
|
||||
{ "path": "../data-view" },
|
||||
{ "path": "../../framework/global" },
|
||||
|
||||
@@ -14,7 +14,6 @@
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@blocksuite/affine-block-attachment": "workspace:*",
|
||||
"@blocksuite/affine-block-database": "workspace:*",
|
||||
"@blocksuite/affine-block-embed": "workspace:*",
|
||||
"@blocksuite/affine-block-image": "workspace:*",
|
||||
"@blocksuite/affine-block-latex": "workspace:*",
|
||||
@@ -25,7 +24,6 @@
|
||||
"@blocksuite/affine-components": "workspace:*",
|
||||
"@blocksuite/affine-shared": "workspace:*",
|
||||
"@blocksuite/block-std": "workspace:*",
|
||||
"@blocksuite/data-view": "workspace:*",
|
||||
"@blocksuite/global": "workspace:*",
|
||||
"@blocksuite/icons": "^2.2.4",
|
||||
"@blocksuite/inline": "workspace:*",
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
import { addSiblingAttachmentBlocks } from '@blocksuite/affine-block-attachment';
|
||||
import type { DataViewBlockComponent } from '@blocksuite/affine-block-data-view';
|
||||
import { insertDatabaseBlockCommand } from '@blocksuite/affine-block-database';
|
||||
import { insertImagesCommand } from '@blocksuite/affine-block-image';
|
||||
import { insertLatexBlockCommand } from '@blocksuite/affine-block-latex';
|
||||
import { focusBlockEnd } from '@blocksuite/affine-block-note';
|
||||
@@ -35,13 +33,10 @@ import {
|
||||
findAncestorModel,
|
||||
openFileOrFiles,
|
||||
} from '@blocksuite/affine-shared/utils';
|
||||
import { viewPresets } from '@blocksuite/data-view/view-presets';
|
||||
import {
|
||||
ArrowDownBigIcon,
|
||||
ArrowUpBigIcon,
|
||||
CopyIcon,
|
||||
DatabaseKanbanViewIcon,
|
||||
DatabaseTableViewIcon,
|
||||
DeleteIcon,
|
||||
DualLinkIcon,
|
||||
ExportToPdfIcon,
|
||||
@@ -85,7 +80,7 @@ let index = 0;
|
||||
export const defaultSlashMenuConfig: SlashMenuConfig = {
|
||||
disableWhen: ({ model }) => {
|
||||
return (
|
||||
['affine:database', 'affine:code'].includes(model.flavour) ||
|
||||
['affine:code'].includes(model.flavour) ||
|
||||
!!findAncestorModel(
|
||||
model,
|
||||
ancestor => ancestor.flavour === 'affine:callout'
|
||||
@@ -93,7 +88,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
|
||||
);
|
||||
},
|
||||
items: [
|
||||
// ---------------------------------------------------------
|
||||
// TODO(@L-Sun): move this to rich-text when it has been remove from blocksuite/affine-components
|
||||
...textConversionConfigs
|
||||
.filter(i => i.type && ['h1', 'h2', 'h3', 'text'].includes(i.type))
|
||||
.map(config => createConversionItem(config, `0_Basic@${index++}`)),
|
||||
@@ -180,12 +175,6 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
|
||||
.filter(i => !['Code', 'Link'].includes(i.name))
|
||||
.map(config => createTextFormatItem(config, `2_Style@${index++}`)),
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// {
|
||||
// groupName: 'Page',
|
||||
// when: ({ model }) =>
|
||||
// model.doc.schema.flavourSchemaMap.has('affine:embed-linked-doc'),
|
||||
// },
|
||||
{
|
||||
name: 'New Doc',
|
||||
description: 'Start a new document.',
|
||||
@@ -605,104 +594,6 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
|
||||
];
|
||||
},
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// { groupName: 'Database' },
|
||||
{
|
||||
name: 'Table View',
|
||||
description: 'Display items in a table format.',
|
||||
searchAlias: ['database'],
|
||||
icon: DatabaseTableViewIcon(),
|
||||
tooltip: slashMenuToolTips['Table View'],
|
||||
group: `7_Database@${index++}`,
|
||||
when: ({ model }) =>
|
||||
model.doc.schema.flavourSchemaMap.has('affine:database') &&
|
||||
!insideEdgelessText(model),
|
||||
action: ({ std }) => {
|
||||
std.command
|
||||
.chain()
|
||||
.pipe(getSelectedModelsCommand)
|
||||
.pipe(insertDatabaseBlockCommand, {
|
||||
viewType: viewPresets.tableViewMeta.type,
|
||||
place: 'after',
|
||||
removeEmptyLine: true,
|
||||
})
|
||||
.pipe(({ insertedDatabaseBlockId }) => {
|
||||
if (insertedDatabaseBlockId) {
|
||||
const telemetry = std.getOptional(TelemetryProvider);
|
||||
telemetry?.track('BlockCreated', {
|
||||
blockType: 'affine:database',
|
||||
});
|
||||
}
|
||||
})
|
||||
.run();
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Todo',
|
||||
searchAlias: ['todo view'],
|
||||
icon: DatabaseTableViewIcon(),
|
||||
tooltip: slashMenuToolTips['Todo'],
|
||||
group: `7_Database@${index++}`,
|
||||
when: ({ model }) =>
|
||||
model.doc.schema.flavourSchemaMap.has('affine:database') &&
|
||||
!insideEdgelessText(model) &&
|
||||
!!model.doc.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)!;
|
||||
|
||||
Promise.resolve()
|
||||
.then(() => {
|
||||
const dataView = std.view.getBlock(
|
||||
dataViewModel.id
|
||||
) as DataViewBlockComponent | null;
|
||||
dataView?.dataSource.viewManager.viewAdd('table');
|
||||
})
|
||||
.catch(console.error);
|
||||
tryRemoveEmptyLine(model);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Kanban View',
|
||||
description: 'Visualize data in a dashboard.',
|
||||
searchAlias: ['database'],
|
||||
icon: DatabaseKanbanViewIcon(),
|
||||
tooltip: slashMenuToolTips['Kanban View'],
|
||||
group: `7_Database@${index++}`,
|
||||
when: ({ model }) =>
|
||||
model.doc.schema.flavourSchemaMap.has('affine:database') &&
|
||||
!insideEdgelessText(model),
|
||||
action: ({ std }) => {
|
||||
std.command
|
||||
.chain()
|
||||
.pipe(getSelectedModelsCommand)
|
||||
.pipe(insertDatabaseBlockCommand, {
|
||||
viewType: viewPresets.kanbanViewMeta.type,
|
||||
place: 'after',
|
||||
removeEmptyLine: true,
|
||||
})
|
||||
.pipe(({ insertedDatabaseBlockId }) => {
|
||||
if (insertedDatabaseBlockId) {
|
||||
const telemetry = std.getOptional(TelemetryProvider);
|
||||
telemetry?.track('BlockCreated', {
|
||||
blockType: 'affine:database',
|
||||
});
|
||||
}
|
||||
})
|
||||
.run();
|
||||
},
|
||||
},
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// { groupName: 'Actions' },
|
||||
{
|
||||
|
||||
@@ -25,10 +25,7 @@ export class SlashMenuExtension extends Extension {
|
||||
di.add(this, [StdIdentifier]);
|
||||
|
||||
// TODO(@L-Sun): remove this after moving all configs to corresponding extensions
|
||||
SlashMenuConfigExtension({
|
||||
id: 'default',
|
||||
config: defaultSlashMenuConfig,
|
||||
}).setup(di);
|
||||
SlashMenuConfigExtension('default', defaultSlashMenuConfig).setup(di);
|
||||
}
|
||||
|
||||
constructor(readonly std: BlockStdScope) {
|
||||
@@ -43,13 +40,10 @@ const SlashMenuConfigIdentifier = createIdentifier<SlashMenuConfig>(
|
||||
`${AFFINE_SLASH_MENU_WIDGET}-config`
|
||||
);
|
||||
|
||||
export function SlashMenuConfigExtension({
|
||||
id,
|
||||
config,
|
||||
}: {
|
||||
id: string;
|
||||
config: SlashMenuConfig;
|
||||
}): ExtensionType {
|
||||
export function SlashMenuConfigExtension(
|
||||
id: string,
|
||||
config: SlashMenuConfig
|
||||
): ExtensionType {
|
||||
return {
|
||||
setup: di => {
|
||||
di.addImpl(SlashMenuConfigIdentifier(id), config);
|
||||
|
||||
@@ -16,7 +16,6 @@ import { Heading4Tooltip } from './heading-4';
|
||||
import { Heading5Tooltip } from './heading-5';
|
||||
import { Heading6Tooltip } from './heading-6';
|
||||
import { ItalicTooltip } from './italic';
|
||||
import { KanbanViewTooltip } from './kanban-view';
|
||||
import { LinearTooltip } from './linear';
|
||||
import { LinkTooltip } from './link';
|
||||
import { LinkDocTooltip } from './link-doc';
|
||||
@@ -29,9 +28,7 @@ import { PDFTooltip } from './pdf';
|
||||
import { PhotoTooltip } from './photo';
|
||||
import { QuoteTooltip } from './quote';
|
||||
import { StrikethroughTooltip } from './strikethrough';
|
||||
import { TableViewTooltip } from './table-view';
|
||||
import { TextTooltip } from './text';
|
||||
import { ToDoListTooltip } from './to-do-list';
|
||||
import { TodayTooltip } from './today';
|
||||
import { TomorrowTooltip } from './tomorrow';
|
||||
import { TweetTooltip } from './tweet';
|
||||
@@ -100,11 +97,6 @@ export const slashMenuToolTips: Record<string, SlashMenuTooltip> = {
|
||||
caption: 'Numbered List',
|
||||
},
|
||||
|
||||
'To-do List': {
|
||||
figure: ToDoListTooltip,
|
||||
caption: 'To-do List',
|
||||
},
|
||||
|
||||
Bold: {
|
||||
figure: BoldTextTooltip,
|
||||
caption: 'Bold Text',
|
||||
@@ -200,16 +192,6 @@ export const slashMenuToolTips: Record<string, SlashMenuTooltip> = {
|
||||
caption: 'Now',
|
||||
},
|
||||
|
||||
'Table View': {
|
||||
figure: TableViewTooltip,
|
||||
caption: 'Table View',
|
||||
},
|
||||
|
||||
'Kanban View': {
|
||||
figure: KanbanViewTooltip,
|
||||
caption: 'Kanban View',
|
||||
},
|
||||
|
||||
'Move Up': {
|
||||
figure: MoveUpTooltip,
|
||||
caption: 'Move Up',
|
||||
|
||||
@@ -1,80 +0,0 @@
|
||||
import { html } from 'lit';
|
||||
// prettier-ignore
|
||||
export const KanbanViewTooltip = html`<svg width="170" height="106" viewBox="0 0 170 106" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="170" height="106" rx="2" fill="white"/>
|
||||
<mask id="mask0_16460_1185" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="106">
|
||||
<rect width="170" height="106" rx="2" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_16460_1185)">
|
||||
<rect x="8.5" y="26.5" width="169" height="84" rx="3.5" fill="white" stroke="#E3E2E4"/>
|
||||
<mask id="mask1_16460_1185" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="9" y="27" width="168" height="83">
|
||||
<rect x="9" y="27" width="168" height="83" rx="4" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask1_16460_1185)">
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="9" font-weight="500" letter-spacing="0em"><tspan x="18" y="42.7727">Untitled Kanban</tspan></text>
|
||||
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="18" y="55.8182">Ungroups</tspan></text>
|
||||
<rect x="84" y="50" width="31" height="8" rx="1" fill="#F3F0FF"/>
|
||||
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="86" y="55.8182">In Progress</tspan></text>
|
||||
<rect x="150" y="50" width="17" height="8" rx="1" fill="#DFF4E8"/>
|
||||
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="152" y="55.8182">Done</tspan></text>
|
||||
<rect x="16.25" y="60.25" width="59.5" height="53.5" rx="1.75" fill="white" stroke="#E3E2E4" stroke-width="0.5"/>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="21" y="68.8182">Task 5</tspan></text>
|
||||
<rect x="20" y="88" width="8" height="8" rx="1" fill="#EEEEEE"/>
|
||||
<g clip-path="url(#clip0_16460_1185)">
|
||||
<g clip-path="url(#clip1_16460_1185)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.8125 90C21.8125 89.8964 21.8964 89.8125 22 89.8125H26C26.1036 89.8125 26.1875 89.8964 26.1875 90V90.6667C26.1875 90.7702 26.1036 90.8542 26 90.8542C25.8964 90.8542 25.8125 90.7702 25.8125 90.6667V90.1875H24.1875V93.8125H25C25.1036 93.8125 25.1875 93.8964 25.1875 94C25.1875 94.1036 25.1036 94.1875 25 94.1875H23C22.8964 94.1875 22.8125 94.1036 22.8125 94C22.8125 93.8964 22.8964 93.8125 23 93.8125H23.8125V90.1875H22.1875V90.6667C22.1875 90.7702 22.1036 90.8542 22 90.8542C21.8964 90.8542 21.8125 90.7702 21.8125 90.6667V90Z" fill="#77757D"/>
|
||||
</g>
|
||||
</g>
|
||||
<rect x="82.25" y="60.25" width="59.5" height="53.5" rx="1.75" fill="white" stroke="#E3E2E4" stroke-width="0.5"/>
|
||||
<rect x="148.25" y="60.25" width="59.5" height="53.5" rx="1.75" fill="white" stroke="#E3E2E4" stroke-width="0.5"/>
|
||||
<line x1="16" y1="99.75" x2="76" y2="99.75" stroke="#E3E2E4" stroke-width="0.5"/>
|
||||
<line x1="82" y1="99.75" x2="142" y2="99.75" stroke="#E3E2E4" stroke-width="0.5"/>
|
||||
<line x1="148" y1="99.75" x2="208" y2="99.75" stroke="#E3E2E4" stroke-width="0.5"/>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="87" y="68.8182">Task 1</tspan></text>
|
||||
<rect x="86" y="88" width="8" height="8" rx="1" fill="#EEEEEE"/>
|
||||
<g clip-path="url(#clip2_16460_1185)">
|
||||
<g clip-path="url(#clip3_16460_1185)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M87.8125 90C87.8125 89.8964 87.8964 89.8125 88 89.8125H92C92.1036 89.8125 92.1875 89.8964 92.1875 90V90.6667C92.1875 90.7702 92.1036 90.8542 92 90.8542C91.8964 90.8542 91.8125 90.7702 91.8125 90.6667V90.1875H90.1875V93.8125H91C91.1036 93.8125 91.1875 93.8964 91.1875 94C91.1875 94.1036 91.1036 94.1875 91 94.1875H89C88.8964 94.1875 88.8125 94.1036 88.8125 94C88.8125 93.8964 88.8964 93.8125 89 93.8125H89.8125V90.1875H88.1875V90.6667C88.1875 90.7702 88.1036 90.8542 88 90.8542C87.8964 90.8542 87.8125 90.7702 87.8125 90.6667V90Z" fill="#77757D"/>
|
||||
</g>
|
||||
</g>
|
||||
<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="153" y="68.8182">Task 4</tspan></text>
|
||||
<rect x="152" y="88" width="8" height="8" rx="1" fill="#EEEEEE"/>
|
||||
<g clip-path="url(#clip4_16460_1185)">
|
||||
<g clip-path="url(#clip5_16460_1185)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M153.812 90C153.812 89.8964 153.896 89.8125 154 89.8125H158C158.104 89.8125 158.188 89.8964 158.188 90V90.6667C158.188 90.7702 158.104 90.8542 158 90.8542C157.896 90.8542 157.812 90.7702 157.812 90.6667V90.1875H156.188V93.8125H157C157.104 93.8125 157.188 93.8964 157.188 94C157.188 94.1036 157.104 94.1875 157 94.1875H155C154.896 94.1875 154.812 94.1036 154.812 94C154.812 93.8964 154.896 93.8125 155 93.8125H155.812V90.1875H154.188V90.6667C154.188 90.7702 154.104 90.8542 154 90.8542C153.896 90.8542 153.812 90.7702 153.812 90.6667V90Z" fill="#77757D"/>
|
||||
</g>
|
||||
</g>
|
||||
<rect x="43" y="50" width="8" height="8" rx="1" fill="#F5F5F5"/>
|
||||
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="45.5" y="55.8182">1</tspan></text>
|
||||
<rect x="117" y="50" width="8" height="8" rx="1" fill="#F5F5F5"/>
|
||||
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="119.5" y="55.8182">1</tspan></text>
|
||||
<rect x="169" y="50" width="8" height="8" rx="1" fill="#F5F5F5"/>
|
||||
<rect x="86" y="103" width="31" height="8" rx="1" fill="#F3F0FF"/>
|
||||
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="88" y="108.818">In Progress</tspan></text>
|
||||
<rect x="152" y="103" width="17" height="8" rx="1" fill="#DFF4E8"/>
|
||||
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="154" y="108.818">Done</tspan></text>
|
||||
</g>
|
||||
<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="16.6364">Visualize data in a dashboard.</tspan></text>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_16460_1185">
|
||||
<rect width="6" height="6" fill="white" transform="translate(21 89)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_16460_1185">
|
||||
<rect width="6" height="6" fill="white" transform="translate(21 89)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip2_16460_1185">
|
||||
<rect width="6" height="6" fill="white" transform="translate(87 89)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip3_16460_1185">
|
||||
<rect width="6" height="6" fill="white" transform="translate(87 89)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip4_16460_1185">
|
||||
<rect width="6" height="6" fill="white" transform="translate(153 89)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip5_16460_1185">
|
||||
<rect width="6" height="6" fill="white" transform="translate(153 89)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,15 +0,0 @@
|
||||
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>
|
||||
`;
|
||||
@@ -8,7 +8,6 @@
|
||||
"include": ["./src"],
|
||||
"references": [
|
||||
{ "path": "../block-attachment" },
|
||||
{ "path": "../block-database" },
|
||||
{ "path": "../block-embed" },
|
||||
{ "path": "../block-image" },
|
||||
{ "path": "../block-latex" },
|
||||
@@ -19,7 +18,6 @@
|
||||
{ "path": "../components" },
|
||||
{ "path": "../shared" },
|
||||
{ "path": "../../framework/block-std" },
|
||||
{ "path": "../data-view" },
|
||||
{ "path": "../../framework/global" },
|
||||
{ "path": "../../framework/inline" },
|
||||
{ "path": "../../framework/store" }
|
||||
|
||||
Reference in New Issue
Block a user