luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor(editor): improve query methods in toolbar context (#10714)

Browse Source
This commit is contained in:
fundon
2025-03-19 00:52:22 +00:00
parent 02d707feab
commit 3cce147c60
14 changed files with 317 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
blocksuite/affine/blocks/block-attachment/src/configs/toolbar.ts
View File

@@ -11,10 +11,8 @@ import {
ActionPlacement,
type ToolbarAction,
type ToolbarActionGroup,
type ToolbarContext,
type ToolbarModuleConfig,
} from '@blocksuite/affine-shared/services';
import { BlockSelection, SurfaceSelection } from '@blocksuite/block-std';
import { Bound } from '@blocksuite/global/gfx';
import {
CaptionIcon,
@@ -25,7 +23,6 @@ import {
EditIcon,
ResetIcon,
} from '@blocksuite/icons/lit';
import type { SelectionConstructor } from '@blocksuite/store';
import { flip, offset } from '@floating-ui/dom';
import { computed } from '@preact/signals-core';
import { html } from 'lit';
@@ -44,101 +41,95 @@ const trackBaseProps = {
type: 'card view',
};
const createAttachmentViewDropdownMenuWith = <T extends SelectionConstructor>(
t: T
) => {
return {
id: 'b.conversions',
actions: [
{
id: 'card',
label: 'Card view',
run(ctx) {
const model = ctx.getCurrentModelByType(t, AttachmentBlockModel);
if (!model) return;
export const attachmentViewDropdownMenu = {
id: 'b.conversions',
actions: [
{
id: 'card',
label: 'Card view',
run(ctx) {
const model = ctx.getCurrentModelByType(AttachmentBlockModel);
if (!model) return;
const style = defaultAttachmentProps.style!;
const width = EMBED_CARD_WIDTH[style];
const height = EMBED_CARD_HEIGHT[style];
const bound = Bound.deserialize(model.xywh);
bound.w = width;
bound.h = height;
const style = defaultAttachmentProps.style!;
const width = EMBED_CARD_WIDTH[style];
const height = EMBED_CARD_HEIGHT[style];
const bound = Bound.deserialize(model.xywh);
bound.w = width;
bound.h = height;
ctx.store.updateBlock(model, {
style,
embed: false,
xywh: bound.serialize(),
});
},
},
{
id: 'embed',
label: 'Embed view',
run(ctx) {
const model = ctx.getCurrentModelByType(t, AttachmentBlockModel);
if (!model) return;
// Clears
ctx.reset();
ctx.select('note');
ctx.std.get(AttachmentEmbedProvider).convertTo(model);
ctx.track('SelectedView', {
...trackBaseProps,
control: 'select view',
type: 'embed view',
});
},
},
],
content(ctx) {
const model = ctx.getCurrentModelByType(t, AttachmentBlockModel);
if (!model) return null;
const embedProvider = ctx.std.get(AttachmentEmbedProvider);
const actions = this.actions.map(action => ({ ...action }));
const viewType$ = computed(() => {
const [cardAction, embedAction] = actions;
const embed = model.props.embed$.value ?? false;
cardAction.disabled = !embed;
embedAction.disabled = embed && embedProvider.embedded(model);
return embed ? embedAction.label : cardAction.label;
});
const toggle = (e: CustomEvent<boolean>) => {
const opened = e.detail;
if (!opened) return;
ctx.track('OpenedViewSelector', {
...trackBaseProps,
control: 'switch view',
ctx.store.updateBlock(model, {
style,
embed: false,
xywh: bound.serialize(),
});
};
return html`${keyed(
model,
html`<affine-view-dropdown-menu
.actions=${actions}
.context=${ctx}
.toggle=${toggle}
.viewType$=${viewType$}
></affine-view-dropdown-menu>`
)}`;
},
},
} satisfies ToolbarActionGroup<ToolbarAction>;
};
{
id: 'embed',
label: 'Embed view',
run(ctx) {
const model = ctx.getCurrentModelByType(AttachmentBlockModel);
if (!model) return;
// Clears
ctx.reset();
ctx.select('note');
ctx.std.get(AttachmentEmbedProvider).convertTo(model);
ctx.track('SelectedView', {
...trackBaseProps,
control: 'select view',
type: 'embed view',
});
},
},
],
content(ctx) {
const model = ctx.getCurrentModelByType(AttachmentBlockModel);
if (!model) return null;
const embedProvider = ctx.std.get(AttachmentEmbedProvider);
const actions = this.actions.map(action => ({ ...action }));
const viewType$ = computed(() => {
const [cardAction, embedAction] = actions;
const embed = model.props.embed$.value ?? false;
cardAction.disabled = !embed;
embedAction.disabled = embed && embedProvider.embedded(model);
return embed ? embedAction.label : cardAction.label;
});
const toggle = (e: CustomEvent<boolean>) => {
const opened = e.detail;
if (!opened) return;
ctx.track('OpenedViewSelector', {
...trackBaseProps,
control: 'switch view',
});
};
return html`${keyed(
model,
html`<affine-view-dropdown-menu
.actions=${actions}
.context=${ctx}
.toggle=${toggle}
.viewType$=${viewType$}
></affine-view-dropdown-menu>`
)}`;
},
} satisfies ToolbarActionGroup<ToolbarAction>;
export const builtinToolbarConfig = {
actions: [
{
id: 'a.rename',
content(cx) {
const component = cx.getCurrentBlockComponentBy(
AttachmentBlockComponent
);
if (!component) return null;
const block = cx.getCurrentBlockByType(AttachmentBlockComponent);
if (!block) return null;
const abortController = new AbortController();
abortController.signal.onabort = () => cx.show();
@@ -152,12 +143,12 @@ export const builtinToolbarConfig = {
createLitPortal({
template: RenameModal({
model: component.model,
model: block.model,
editorHost: cx.host,
abortController,
}),
computePosition: {
referenceElement: component,
referenceElement: block,
placement: 'top-start',
middleware: [flip(), offset(4)],
},
@@ -170,16 +161,14 @@ export const builtinToolbarConfig = {
`;
},
},
createAttachmentViewDropdownMenuWith(BlockSelection),
attachmentViewDropdownMenu,
{
id: 'c.download',
tooltip: 'Download',
icon: DownloadIcon(),
run(ctx) {
const component = ctx.getCurrentBlockComponentBy(
AttachmentBlockComponent
);
component?.download();
const block = ctx.getCurrentBlockByType(AttachmentBlockComponent);
block?.download();
},
},
{
@@ -187,10 +176,8 @@ export const builtinToolbarConfig = {
tooltip: 'Caption',
icon: CaptionIcon(),
run(ctx) {
const component = ctx.getCurrentBlockComponentBy(
AttachmentBlockComponent
);
component?.captionEditor?.show();
const block = ctx.getCurrentBlockByType(AttachmentBlockComponent);
block?.captionEditor?.show();
ctx.track('OpenedCaptionEditor', {
...trackBaseProps,
@@ -208,10 +195,8 @@ export const builtinToolbarConfig = {
icon: CopyIcon(),
run(ctx) {
// TODO(@fundon): unify `clone` method
const component = ctx.getCurrentBlockComponentBy(
AttachmentBlockComponent
);
component?.copy();
const block = ctx.getCurrentBlockByType(AttachmentBlockComponent);
block?.copy();
},
},
{
@@ -219,9 +204,7 @@ export const builtinToolbarConfig = {
label: 'Duplicate',
icon: DuplicateIcon(),
run(ctx) {
const model = ctx.getCurrentBlockComponentBy(
AttachmentBlockComponent
)?.model;
const model = ctx.getCurrentModelByType(AttachmentBlockModel);
if (!model) return;
// TODO(@fundon): unify `duplicate` method
@@ -241,10 +224,8 @@ export const builtinToolbarConfig = {
label: 'Reload',
icon: ResetIcon(),
run(ctx) {
const component = ctx.getCurrentBlockComponentBy(
AttachmentBlockComponent
);
component?.refreshData();
const block = ctx.getCurrentBlockByType(AttachmentBlockComponent);
block?.refreshData();
},
},
{
@@ -257,7 +238,7 @@ export const builtinToolbarConfig = {
const model = ctx.getCurrentModel();
if (!model) return;
ctx.store.deleteBlock(model);
ctx.store.deleteBlock(model.id);
// Clears
ctx.select('note');
@@ -266,7 +247,3 @@ export const builtinToolbarConfig = {
},
],
} as const satisfies ToolbarModuleConfig;
export const attachmentViewDropdownMenu = (ctx: ToolbarContext) => {
return createAttachmentViewDropdownMenuWith(SurfaceSelection).content(ctx);
};

48
blocksuite/affine/blocks/block-bookmark/src/configs/toolbar.ts
View File

@@ -39,10 +39,7 @@ export const builtinToolbarConfig = {
{
id: 'a.preview',
content(ctx) {
const model = ctx.getCurrentModelByType(
BlockSelection,
BookmarkBlockModel
);
const model = ctx.getCurrentModelByType(BookmarkBlockModel);
if (!model) return null;
const { url } = model.props;
@@ -57,10 +54,7 @@ export const builtinToolbarConfig = {
id: 'inline',
label: 'Inline view',
run(ctx) {
const model = ctx.getCurrentModelByType(
BlockSelection,
BookmarkBlockModel
);
const model = ctx.getCurrentModelByType(BookmarkBlockModel);
if (!model) return;
const { title, caption, url } = model.props;
@@ -98,10 +92,7 @@ export const builtinToolbarConfig = {
id: 'embed',
label: 'Embed view',
disabled(ctx) {
const model = ctx.getCurrentModelByType(
BlockSelection,
BookmarkBlockModel
);
const model = ctx.getCurrentModelByType(BookmarkBlockModel);
if (!model) return true;
const url = model.props.url;
@@ -121,10 +112,7 @@ export const builtinToolbarConfig = {
return !canEmbedAsIframe && options?.viewType !== 'embed';
},
run(ctx) {
const model = ctx.getCurrentModelByType(
BlockSelection,
BookmarkBlockModel
);
const model = ctx.getCurrentModelByType(BookmarkBlockModel);
if (!model) return;
const { caption, url, style } = model.props;
@@ -189,10 +177,7 @@ export const builtinToolbarConfig = {
},
],
content(ctx) {
const model = ctx.getCurrentModelByType(
BlockSelection,
BookmarkBlockModel
);
const model = ctx.getCurrentModelByType(BookmarkBlockModel);
if (!model) return null;
const actions = this.actions.map(action => ({ ...action }));
@@ -230,10 +215,7 @@ export const builtinToolbarConfig = {
},
],
content(ctx) {
const model = ctx.getCurrentModelByType(
BlockSelection,
BookmarkBlockModel
);
const model = ctx.getCurrentModelByType(BookmarkBlockModel);
if (!model) return null;
const actions = this.actions.map(action => ({
@@ -275,10 +257,8 @@ export const builtinToolbarConfig = {
tooltip: 'Caption',
icon: CaptionIcon(),
run(ctx) {
const component = ctx.getCurrentBlockComponentBy(
BookmarkBlockComponent
);
component?.captionEditor?.show();
const block = ctx.getCurrentBlockByType(BookmarkBlockComponent);
block?.captionEditor?.show();
ctx.track('OpenedCaptionEditor', {
...trackBaseProps,
@@ -295,7 +275,7 @@ export const builtinToolbarConfig = {
label: 'Copy',
icon: CopyIcon(),
run(ctx) {
const model = ctx.getCurrentModel();
const model = ctx.getCurrentModelByType(BookmarkBlockModel);
if (!model) return;
const slice = Slice.fromModels(ctx.store, [model]);
@@ -310,7 +290,7 @@ export const builtinToolbarConfig = {
label: 'Duplicate',
icon: DuplicateIcon(),
run(ctx) {
const model = ctx.getCurrentModel();
const model = ctx.getCurrentModelByType(BookmarkBlockModel);
if (!model) return;
const { flavour, parent } = model;
@@ -328,10 +308,8 @@ export const builtinToolbarConfig = {
label: 'Reload',
icon: ResetIcon(),
run(ctx) {
const component = ctx.getCurrentBlockComponentBy(
BookmarkBlockComponent
);
component?.refreshData();
const block = ctx.getCurrentBlockByType(BookmarkBlockComponent);
block?.refreshData();
},
},
{
@@ -341,7 +319,7 @@ export const builtinToolbarConfig = {
icon: DeleteIcon(),
variant: 'destructive',
run(ctx) {
const model = ctx.getCurrentModel();
const model = ctx.getCurrentModelByType(BookmarkBlockModel);
if (!model) return;
ctx.store.deleteBlock(model);

39
blocksuite/affine/blocks/block-embed/src/configs/toolbar.ts
View File

@@ -52,7 +52,7 @@ export function createBuiltinToolbarConfigForExternal(
{
id: 'a.preview',
content(ctx) {
const model = ctx.getCurrentModel();
const model = ctx.getCurrentBlockByType(klass)?.model;
if (!model || !isExternalEmbedModel(model)) return null;
const { url } = model.props;
@@ -72,7 +72,7 @@ export function createBuiltinToolbarConfigForExternal(
id: 'inline',
label: 'Inline view',
run(ctx) {
const model = ctx.getCurrentModel();
const model = ctx.getCurrentBlockByType(klass)?.model;
if (!model || !isExternalEmbedModel(model)) return;
const { title, caption, url: link } = model.props;
@@ -105,7 +105,7 @@ export function createBuiltinToolbarConfigForExternal(
id: 'card',
label: 'Card view',
disabled(ctx) {
const model = ctx.getCurrentModel();
const model = ctx.getCurrentBlockByType(klass)?.model;
if (!model || !isExternalEmbedModel(model)) return true;
const { url } = model.props;
@@ -116,7 +116,7 @@ export function createBuiltinToolbarConfigForExternal(
return options?.viewType === 'card';
},
run(ctx) {
const model = ctx.getCurrentModel();
const model = ctx.getCurrentBlockByType(klass)?.model;
if (!model || !isExternalEmbedModel(model)) return;
const { url, caption } = model.props;
@@ -165,7 +165,7 @@ export function createBuiltinToolbarConfigForExternal(
id: 'embed',
label: 'Embed view',
disabled(ctx) {
const model = ctx.getCurrentModel();
const model = ctx.getCurrentBlockByType(klass)?.model;
if (!model || !isExternalEmbedModel(model)) return false;
const { url } = model.props;
@@ -176,7 +176,7 @@ export function createBuiltinToolbarConfigForExternal(
return options?.viewType === 'embed';
},
when(ctx) {
const model = ctx.getCurrentModel();
const model = ctx.getCurrentBlockByType(klass)?.model;
if (!model || !isExternalEmbedModel(model)) return false;
const { url } = model.props;
@@ -187,7 +187,7 @@ export function createBuiltinToolbarConfigForExternal(
return options?.viewType === 'embed';
},
run(ctx) {
const model = ctx.getCurrentModel();
const model = ctx.getCurrentBlockByType(klass)?.model;
if (!model || !isExternalEmbedModel(model)) return;
const { url, caption } = model.props;
@@ -231,7 +231,7 @@ export function createBuiltinToolbarConfigForExternal(
},
],
content(ctx) {
const model = ctx.getCurrentModel();
const model = ctx.getCurrentBlockByType(klass)?.model;
if (!model || !isExternalEmbedModel(model)) return null;
const { url } = model.props;
@@ -277,10 +277,7 @@ export function createBuiltinToolbarConfigForExternal(
},
],
content(ctx) {
const model = ctx.getCurrentModelByType(
BlockSelection,
EmbedGithubModel
);
const model = ctx.getCurrentModelByType(EmbedGithubModel);
if (!model) return null;
const actions = this.actions.map(action => ({
@@ -322,10 +319,8 @@ export function createBuiltinToolbarConfigForExternal(
tooltip: 'Caption',
icon: CaptionIcon(),
run(ctx) {
const component = ctx.getCurrentBlockComponentBy(klass);
if (!component) return;
component.captionEditor?.show();
const block = ctx.getCurrentBlockByType(klass);
block?.captionEditor?.show();
ctx.track('OpenedCaptionEditor', {
...trackBaseProps,
@@ -342,7 +337,7 @@ export function createBuiltinToolbarConfigForExternal(
label: 'Copy',
icon: CopyIcon(),
run(ctx) {
const model = ctx.getCurrentModelBy(BlockSelection);
const model = ctx.getCurrentBlockByType(klass)?.model;
if (!model || !isExternalEmbedModel(model)) return;
const slice = Slice.fromModels(ctx.store, [model]);
@@ -357,7 +352,7 @@ export function createBuiltinToolbarConfigForExternal(
label: 'Duplicate',
icon: DuplicateIcon(),
run(ctx) {
const model = ctx.getCurrentModelBy(BlockSelection);
const model = ctx.getCurrentBlockByType(klass)?.model;
if (!model || !isExternalEmbedModel(model)) return;
const { flavour, parent } = model;
@@ -375,8 +370,8 @@ export function createBuiltinToolbarConfigForExternal(
label: 'Reload',
icon: ResetIcon(),
run(ctx) {
const component = ctx.getCurrentBlockComponentBy(klass);
component?.refreshData();
const block = ctx.getCurrentBlockByType(klass);
block?.refreshData();
},
},
{
@@ -386,10 +381,10 @@ export function createBuiltinToolbarConfigForExternal(
icon: DeleteIcon(),
variant: 'destructive',
run(ctx) {
const model = ctx.getCurrentModelBy(BlockSelection);
const model = ctx.getCurrentBlockByType(klass)?.model;
if (!model || !isExternalEmbedModel(model)) return;
ctx.store.deleteBlock(model);
ctx.store.deleteBlock(model.id);
// Clears
ctx.select('note');

21
blocksuite/affine/blocks/block-embed/src/embed-html-block/configs/toolbar.ts
View File

@@ -7,7 +7,6 @@ import {
type ToolbarModuleConfig,
} from '@blocksuite/affine-shared/services';
import { getBlockProps } from '@blocksuite/affine-shared/utils';
import { BlockSelection } from '@blocksuite/block-std';
import {
CaptionIcon,
CopyIcon,
@@ -36,10 +35,8 @@ export const builtinToolbarConfig = {
icon: ExpandFullIcon(),
tooltip: 'Open this doc',
run(ctx) {
const component = ctx.getCurrentBlockComponentBy(
EmbedHtmlBlockComponent
);
component?.open();
const block = ctx.getCurrentBlockByType(EmbedHtmlBlockComponent);
block?.open();
},
},
{
@@ -55,7 +52,7 @@ export const builtinToolbarConfig = {
},
],
content(ctx) {
const model = ctx.getCurrentModelByType(BlockSelection, EmbedHtmlModel);
const model = ctx.getCurrentModelByType(EmbedHtmlModel);
if (!model) return null;
const actions = this.actions.map<ToolbarAction>(action => ({
@@ -97,10 +94,8 @@ export const builtinToolbarConfig = {
tooltip: 'Caption',
icon: CaptionIcon(),
run(ctx) {
const component = ctx.getCurrentBlockComponentBy(
EmbedHtmlBlockComponent
);
component?.captionEditor?.show();
const block = ctx.getCurrentBlockByType(EmbedHtmlBlockComponent);
block?.captionEditor?.show();
ctx.track('OpenedCaptionEditor', {
...trackBaseProps,
@@ -117,7 +112,7 @@ export const builtinToolbarConfig = {
label: 'Copy',
icon: CopyIcon(),
run(ctx) {
const model = ctx.getCurrentModelBy(BlockSelection);
const model = ctx.getCurrentModelByType(EmbedHtmlModel);
if (!model) return;
const slice = Slice.fromModels(ctx.store, [model]);
@@ -132,7 +127,7 @@ export const builtinToolbarConfig = {
label: 'Duplicate',
icon: DuplicateIcon(),
run(ctx) {
const model = ctx.getCurrentModelBy(BlockSelection);
const model = ctx.getCurrentModelByType(EmbedHtmlModel);
if (!model) return;
const { flavour, parent } = model;
@@ -151,7 +146,7 @@ export const builtinToolbarConfig = {
icon: DeleteIcon(),
variant: 'destructive',
run(ctx) {
const model = ctx.getCurrentModelBy(BlockSelection);
const model = ctx.getCurrentModelByType(EmbedHtmlModel);
if (!model) return;
ctx.store.deleteBlock(model);

29
blocksuite/affine/blocks/block-embed/src/embed-iframe-block/configs/toolbar.ts
View File

@@ -40,10 +40,7 @@ export const builtinToolbarConfig = {
id: 'inline',
label: 'Inline view',
run(ctx) {
const model = ctx.getCurrentModelByType(
BlockSelection,
EmbedIframeBlockModel
);
const model = ctx.getCurrentModelByType(EmbedIframeBlockModel);
if (!model) return;
const { title, caption, url } = model.props;
@@ -76,10 +73,7 @@ export const builtinToolbarConfig = {
id: 'card',
label: 'Card view',
run(ctx) {
const model = ctx.getCurrentModelByType(
BlockSelection,
EmbedIframeBlockModel
);
const model = ctx.getCurrentModelByType(EmbedIframeBlockModel);
if (!model) return;
const { url, caption } = model.props;
@@ -119,10 +113,7 @@ export const builtinToolbarConfig = {
},
],
content(ctx) {
const model = ctx.getCurrentModelByType(
BlockSelection,
EmbedIframeBlockModel
);
const model = ctx.getCurrentModelByType(EmbedIframeBlockModel);
if (!model) return null;
const actions = this.actions.map(action => ({ ...action }));
@@ -152,9 +143,7 @@ export const builtinToolbarConfig = {
tooltip: 'Caption',
icon: CaptionIcon(),
run(ctx) {
const component = ctx.getCurrentBlockComponentBy(
EmbedIframeBlockComponent
);
const component = ctx.getCurrentBlockByType(EmbedIframeBlockComponent);
component?.captionEditor?.show();
ctx.track('OpenedCaptionEditor', {
@@ -172,7 +161,7 @@ export const builtinToolbarConfig = {
label: 'Copy',
icon: CopyIcon(),
run(ctx) {
const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
const model = ctx.getCurrentModelByType(EmbedIframeBlockModel);
if (!model) return;
const slice = Slice.fromModels(ctx.store, [model]);
@@ -187,7 +176,7 @@ export const builtinToolbarConfig = {
label: 'Duplicate',
icon: DuplicateIcon(),
run(ctx) {
const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
const model = ctx.getCurrentModelByType(EmbedIframeBlockModel);
if (!model) return;
const { flavour, parent } = model;
@@ -205,9 +194,7 @@ export const builtinToolbarConfig = {
label: 'Reload',
icon: ResetIcon(),
run(ctx) {
const component = ctx.getCurrentBlockComponentBy(
EmbedIframeBlockComponent
);
const component = ctx.getCurrentBlockByType(EmbedIframeBlockComponent);
component?.refreshData().catch(console.error);
},
},
@@ -218,7 +205,7 @@ export const builtinToolbarConfig = {
icon: DeleteIcon(),
variant: 'destructive',
run(ctx) {
const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
const model = ctx.getCurrentModelByType(EmbedIframeBlockModel);
if (!model) return;
ctx.store.deleteBlock(model);

49
blocksuite/affine/blocks/block-embed/src/embed-linked-doc-block/configs/toolbar.ts
View File

@@ -10,7 +10,6 @@ import {
getBlockProps,
referenceToNode,
} from '@blocksuite/affine-shared/utils';
import { BlockSelection } from '@blocksuite/block-std';
import {
CaptionIcon,
CopyIcon,
@@ -37,12 +36,10 @@ export const builtinToolbarConfig = {
{
id: 'a.doc-title',
content(ctx) {
const component = ctx.getCurrentBlockComponentBy(
EmbedLinkedDocBlockComponent
);
if (!component) return null;
const block = ctx.getCurrentBlockByType(EmbedLinkedDocBlockComponent);
if (!block) return null;
const model = component.model;
const model = block.model;
if (!model.props.title) return null;
const originalTitle =
@@ -50,7 +47,7 @@ export const builtinToolbarConfig = {
return html`<affine-linked-doc-title
.title=${originalTitle}
.open=${(event: MouseEvent) => component.open({ event })}
.open=${(event: MouseEvent) => block.open({ event })}
></affine-linked-doc-title>`;
},
},
@@ -61,10 +58,10 @@ export const builtinToolbarConfig = {
id: 'inline',
label: 'Inline view',
run(ctx) {
const component = ctx.getCurrentBlockComponentBy(
const block = ctx.getCurrentBlockByType(
EmbedLinkedDocBlockComponent
);
component?.covertToInline();
block?.covertToInline();
// Clears
ctx.select('note');
@@ -86,14 +83,14 @@ export const builtinToolbarConfig = {
id: 'embed',
label: 'Embed view',
disabled(ctx) {
const component = ctx.getCurrentBlockComponentBy(
const block = ctx.getCurrentBlockByType(
EmbedLinkedDocBlockComponent
);
if (!component) return true;
if (!block) return true;
if (component.closest('affine-embed-synced-doc-block')) return true;
if (block.closest('affine-embed-synced-doc-block')) return true;
const model = component.model;
const model = block.model;
// same doc
if (model.props.pageId === ctx.store.id) return true;
@@ -104,10 +101,10 @@ export const builtinToolbarConfig = {
return false;
},
run(ctx) {
const component = ctx.getCurrentBlockComponentBy(
const block = ctx.getCurrentBlockByType(
EmbedLinkedDocBlockComponent
);
component?.convertToEmbed();
block?.convertToEmbed();
ctx.track('SelectedView', {
...trackBaseProps,
@@ -118,10 +115,7 @@ export const builtinToolbarConfig = {
},
],
content(ctx) {
const model = ctx.getCurrentModelByType(
BlockSelection,
EmbedLinkedDocModel
);
const model = ctx.getCurrentModelByType(EmbedLinkedDocModel);
if (!model) return null;
const actions = this.actions.map(action => ({ ...action }));
@@ -159,10 +153,7 @@ export const builtinToolbarConfig = {
},
],
content(ctx) {
const model = ctx.getCurrentModelByType(
BlockSelection,
EmbedLinkedDocModel
);
const model = ctx.getCurrentModelByType(EmbedLinkedDocModel);
if (!model) return null;
const actions = this.actions.map(action => ({
@@ -203,10 +194,8 @@ export const builtinToolbarConfig = {
tooltip: 'Caption',
icon: CaptionIcon(),
run(ctx) {
const component = ctx.getCurrentBlockComponentBy(
EmbedLinkedDocBlockComponent
);
component?.captionEditor?.show();
const block = ctx.getCurrentBlockByType(EmbedLinkedDocBlockComponent);
block?.captionEditor?.show();
ctx.track('OpenedCaptionEditor', {
...trackBaseProps,
@@ -223,7 +212,7 @@ export const builtinToolbarConfig = {
label: 'Copy',
icon: CopyIcon(),
run(ctx) {
const model = ctx.getCurrentModelBy(BlockSelection);
const model = ctx.getCurrentModelByType(EmbedLinkedDocModel);
if (!model) return;
const slice = Slice.fromModels(ctx.store, [model]);
@@ -238,7 +227,7 @@ export const builtinToolbarConfig = {
label: 'Duplicate',
icon: DuplicateIcon(),
run(ctx) {
const model = ctx.getCurrentModelBy(BlockSelection);
const model = ctx.getCurrentModelByType(EmbedLinkedDocModel);
if (!model) return;
const { flavour, parent } = model;
@@ -257,7 +246,7 @@ export const builtinToolbarConfig = {
icon: DeleteIcon(),
variant: 'destructive',
run(ctx) {
const model = ctx.getCurrentModelBy(BlockSelection);
const model = ctx.getCurrentModelByType(EmbedLinkedDocModel);
if (!model) return;
ctx.store.deleteBlock(model);

36
blocksuite/affine/blocks/block-embed/src/embed-synced-doc-block/configs/toolbar.ts
View File

@@ -9,7 +9,6 @@ import {
type ToolbarModuleConfig,
} from '@blocksuite/affine-shared/services';
import { getBlockProps } from '@blocksuite/affine-shared/utils';
import { BlockSelection } from '@blocksuite/block-std';
import {
ArrowDownSmallIcon,
CaptionIcon,
@@ -49,10 +48,8 @@ export const builtinToolbarConfig = {
},
],
content(ctx) {
const component = ctx.getCurrentBlockComponentBy(
EmbedSyncedDocBlockComponent
);
if (!component) return null;
const block = ctx.getCurrentBlockByType(EmbedSyncedDocBlockComponent);
if (!block) return null;
const actions = this.actions
.map<ToolbarAction>(action => {
@@ -64,11 +61,11 @@ export const builtinToolbarConfig = {
return {
...action,
disabled: shouldOpenInActiveView
? component.model.props.pageId === ctx.store.id
? block.model.props.pageId === ctx.store.id
: false,
when: allowed,
run: (_ctx: ToolbarContext) =>
component.open({
block.open({
openMode: action.id as OpenDocMode,
}),
};
@@ -115,10 +112,10 @@ export const builtinToolbarConfig = {
id: 'inline',
label: 'Inline view',
run(ctx) {
const component = ctx.getCurrentBlockComponentBy(
const block = ctx.getCurrentBlockByType(
EmbedSyncedDocBlockComponent
);
component?.covertToInline();
block?.covertToInline();
// Clears
ctx.select('note');
@@ -135,10 +132,10 @@ export const builtinToolbarConfig = {
id: 'card',
label: 'Card view',
run(ctx) {
const component = ctx.getCurrentBlockComponentBy(
const block = ctx.getCurrentBlockByType(
EmbedSyncedDocBlockComponent
);
component?.convertToCard();
block?.convertToCard();
ctx.track('SelectedView', {
...trackBaseProps,
@@ -154,10 +151,7 @@ export const builtinToolbarConfig = {
},
],
content(ctx) {
const model = ctx.getCurrentModelByType(
BlockSelection,
EmbedSyncedDocModel
);
const model = ctx.getCurrentModelByType(EmbedSyncedDocModel);
if (!model) return null;
const actions = this.actions.map(action => ({ ...action }));
@@ -188,10 +182,8 @@ export const builtinToolbarConfig = {
tooltip: 'Caption',
icon: CaptionIcon(),
run(ctx) {
const component = ctx.getCurrentBlockComponentBy(
EmbedSyncedDocBlockComponent
);
component?.captionEditor?.show();
const block = ctx.getCurrentBlockByType(EmbedSyncedDocBlockComponent);
block?.captionEditor?.show();
ctx.track('OpenedCaptionEditor', {
...trackBaseProps,
control: 'add caption',
@@ -207,7 +199,7 @@ export const builtinToolbarConfig = {
label: 'Copy',
icon: CopyIcon(),
run(ctx) {
const model = ctx.getCurrentModelBy(BlockSelection);
const model = ctx.getCurrentModelByType(EmbedSyncedDocModel);
if (!model) return;
const slice = Slice.fromModels(ctx.store, [model]);
@@ -222,7 +214,7 @@ export const builtinToolbarConfig = {
label: 'Duplicate',
icon: DuplicateIcon(),
run(ctx) {
const model = ctx.getCurrentModelBy(BlockSelection);
const model = ctx.getCurrentModelByType(EmbedSyncedDocModel);
if (!model) return;
const { flavour, parent } = model;
@@ -241,7 +233,7 @@ export const builtinToolbarConfig = {
icon: DeleteIcon(),
variant: 'destructive',
run(ctx) {
const model = ctx.getCurrentModelBy(BlockSelection);
const model = ctx.getCurrentModelByType(EmbedSyncedDocModel);
if (!model) return;
ctx.store.deleteBlock(model);

2
blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/change-attachment-button.ts
View File

@@ -109,7 +109,7 @@ export class EdgelessChangeAttachmentButton extends WithDisposable(LitElement) {
`,
// TODO(@fundon): should remove it when refactoring the element toolbar
attachmentViewDropdownMenu(new ToolbarContext(this.std)),
attachmentViewDropdownMenu.content(new ToolbarContext(this.std)),
html`
<editor-icon-button