From d03744688b91da21b0483e9a6010175ab2f94a6c Mon Sep 17 00:00:00 2001 From: fundon Date: Mon, 10 Feb 2025 10:56:13 +0000 Subject: [PATCH] refactor(editor): move embed-card-modal to components (#10037) --- blocksuite/affine/block-bookmark/package.json | 1 - .../src/components/embed-card-modal/index.ts | 4 -- .../block-bookmark/src/components/index.ts | 1 - .../affine/block-bookmark/src/effects.ts | 12 ---- .../affine/block-bookmark/tsconfig.json | 1 - blocksuite/affine/components/package.json | 3 +- .../embed-card-caption-edit-modal.ts | 0 .../embed-card-create-modal.ts | 38 ++---------- .../embed-card-modal/embed-card-edit-modal.ts | 59 +++++++++---------- .../components/src/embed-card-modal/index.ts | 16 +++++ .../src}/embed-card-modal/styles.ts | 0 .../affine/model/src/blocks/embed/index.ts | 15 ++--- .../affine/model/src/blocks/embed/types.ts | 38 ++++++++++++ blocksuite/blocks/src/effects.ts | 2 + .../blocks/src/root-block/utils/index.ts | 3 +- .../src/root-block/utils/types.ts} | 36 +---------- .../change-embed-card-button.ts | 46 +++++++++++---- .../widgets/element-toolbar/index.ts | 2 +- .../widgets/embed-card-toolbar/context.ts | 3 +- .../embed-card-toolbar/embed-card-toolbar.ts | 56 ++++++++++++++---- .../widgets/keyboard-toolbar/config.ts | 2 +- .../root-block/widgets/slash-menu/config.ts | 2 +- tools/utils/src/workspace.gen.ts | 1 - yarn.lock | 1 - 24 files changed, 189 insertions(+), 153 deletions(-) delete mode 100644 blocksuite/affine/block-bookmark/src/components/embed-card-modal/index.ts rename blocksuite/affine/{block-bookmark/src/components => components/src}/embed-card-modal/embed-card-caption-edit-modal.ts (100%) rename blocksuite/affine/{block-bookmark/src/components => components/src}/embed-card-modal/embed-card-create-modal.ts (83%) rename blocksuite/affine/{block-bookmark/src/components => components/src}/embed-card-modal/embed-card-edit-modal.ts (91%) create mode 100644 blocksuite/affine/components/src/embed-card-modal/index.ts rename blocksuite/affine/{block-bookmark/src/components => components/src}/embed-card-modal/styles.ts (100%) create mode 100644 blocksuite/affine/model/src/blocks/embed/types.ts rename blocksuite/{affine/block-bookmark/src/components/embed-card-modal/type.ts => blocks/src/root-block/utils/types.ts} (60%) diff --git a/blocksuite/affine/block-bookmark/package.json b/blocksuite/affine/block-bookmark/package.json index 8567961921..1edb3d7103 100644 --- a/blocksuite/affine/block-bookmark/package.json +++ b/blocksuite/affine/block-bookmark/package.json @@ -14,7 +14,6 @@ "license": "MIT", "dependencies": { "@blocksuite/affine-block-embed": "workspace:*", - "@blocksuite/affine-block-surface": "workspace:*", "@blocksuite/affine-components": "workspace:*", "@blocksuite/affine-model": "workspace:*", "@blocksuite/affine-shared": "workspace:*", diff --git a/blocksuite/affine/block-bookmark/src/components/embed-card-modal/index.ts b/blocksuite/affine/block-bookmark/src/components/embed-card-modal/index.ts deleted file mode 100644 index db8503be6e..0000000000 --- a/blocksuite/affine/block-bookmark/src/components/embed-card-modal/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from './embed-card-caption-edit-modal'; -export * from './embed-card-create-modal'; -export * from './embed-card-edit-modal'; -export * from './type'; diff --git a/blocksuite/affine/block-bookmark/src/components/index.ts b/blocksuite/affine/block-bookmark/src/components/index.ts index fca078dd30..774cd990e0 100644 --- a/blocksuite/affine/block-bookmark/src/components/index.ts +++ b/blocksuite/affine/block-bookmark/src/components/index.ts @@ -1,2 +1 @@ export * from './bookmark-card'; -export * from './embed-card-modal'; diff --git a/blocksuite/affine/block-bookmark/src/effects.ts b/blocksuite/affine/block-bookmark/src/effects.ts index 62dfc50d3e..34d5fca9b2 100644 --- a/blocksuite/affine/block-bookmark/src/effects.ts +++ b/blocksuite/affine/block-bookmark/src/effects.ts @@ -1,11 +1,6 @@ import { BookmarkBlockComponent } from './bookmark-block'; import { BookmarkEdgelessBlockComponent } from './bookmark-edgeless-block'; import { BookmarkCard } from './components/bookmark-card'; -import { - EmbedCardCreateModal, - EmbedCardEditCaptionEditModal, - EmbedCardEditModal, -} from './components/embed-card-modal'; export function effects() { customElements.define( @@ -14,11 +9,4 @@ export function effects() { ); customElements.define('affine-bookmark', BookmarkBlockComponent); customElements.define('bookmark-card', BookmarkCard); - - customElements.define('embed-card-create-modal', EmbedCardCreateModal); - customElements.define('embed-card-edit-modal', EmbedCardEditModal); - customElements.define( - 'embed-card-caption-edit-modal', - EmbedCardEditCaptionEditModal - ); } diff --git a/blocksuite/affine/block-bookmark/tsconfig.json b/blocksuite/affine/block-bookmark/tsconfig.json index 3f52439ca0..4494890a0c 100644 --- a/blocksuite/affine/block-bookmark/tsconfig.json +++ b/blocksuite/affine/block-bookmark/tsconfig.json @@ -8,7 +8,6 @@ "include": ["./src"], "references": [ { "path": "../block-embed" }, - { "path": "../block-surface" }, { "path": "../components" }, { "path": "../model" }, { "path": "../shared" }, diff --git a/blocksuite/affine/components/package.json b/blocksuite/affine/components/package.json index b35e8a8c72..007f482311 100644 --- a/blocksuite/affine/components/package.json +++ b/blocksuite/affine/components/package.json @@ -62,7 +62,8 @@ "./notification": "./src/notification/index.ts", "./block-zero-width": "./src/block-zero-width/index.ts", "./block-selection": "./src/block-selection/index.ts", - "./doc-title": "./src/doc-title/index.ts" + "./doc-title": "./src/doc-title/index.ts", + "./embed-card-modal": "./src/embed-card-modal/index.ts" }, "files": [ "src", diff --git a/blocksuite/affine/block-bookmark/src/components/embed-card-modal/embed-card-caption-edit-modal.ts b/blocksuite/affine/components/src/embed-card-modal/embed-card-caption-edit-modal.ts similarity index 100% rename from blocksuite/affine/block-bookmark/src/components/embed-card-modal/embed-card-caption-edit-modal.ts rename to blocksuite/affine/components/src/embed-card-modal/embed-card-caption-edit-modal.ts diff --git a/blocksuite/affine/block-bookmark/src/components/embed-card-modal/embed-card-create-modal.ts b/blocksuite/affine/components/src/embed-card-modal/embed-card-create-modal.ts similarity index 83% rename from blocksuite/affine/block-bookmark/src/components/embed-card-modal/embed-card-create-modal.ts rename to blocksuite/affine/components/src/embed-card-modal/embed-card-create-modal.ts index f0f9a87b0d..e89aff2d6c 100644 --- a/blocksuite/affine/block-bookmark/src/components/embed-card-modal/embed-card-create-modal.ts +++ b/blocksuite/affine/components/src/embed-card-modal/embed-card-create-modal.ts @@ -1,21 +1,15 @@ -import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface'; -import { toast } from '@blocksuite/affine-components/toast'; -import type { EmbedCardStyle } from '@blocksuite/affine-model'; -import { - EMBED_CARD_HEIGHT, - EMBED_CARD_WIDTH, -} from '@blocksuite/affine-shared/consts'; import { EmbedOptionProvider } from '@blocksuite/affine-shared/services'; import { isValidUrl, stopPropagation } from '@blocksuite/affine-shared/utils'; import type { EditorHost } from '@blocksuite/block-std'; import { ShadowlessElement } from '@blocksuite/block-std'; import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx'; -import { Bound, Vec, WithDisposable } from '@blocksuite/global/utils'; +import { WithDisposable } from '@blocksuite/global/utils'; import type { BlockModel } from '@blocksuite/store'; import { html } from 'lit'; import { property, query, state } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; +import { toast } from '../toast'; import { embedCardModalStyles } from './styles.js'; export class EmbedCardCreateModal extends WithDisposable(ShadowlessElement) { @@ -55,37 +49,13 @@ export class EmbedCardCreateModal extends WithDisposable(ShadowlessElement) { index ); } else if (mode === 'edgeless') { - let flavour = 'affine:bookmark', - targetStyle: EmbedCardStyle = 'vertical'; - - if (embedOptions) { - flavour = embedOptions.flavour; - targetStyle = embedOptions.styles[0]; - } - const gfx = this.host.std.get(GfxControllerIdentifier); - const crud = this.host.std.get(EdgelessCRUDIdentifier); - - const viewport = gfx.viewport; const surfaceModel = gfx.surface; if (!surfaceModel) { return; } - const center = Vec.toVec(viewport.center); - crud.addBlock( - flavour, - { - url, - xywh: Bound.fromCenter( - center, - EMBED_CARD_WIDTH[targetStyle], - EMBED_CARD_HEIGHT[targetStyle] - ).serialize(), - style: targetStyle, - }, - surfaceModel - ); + this.createOptions.onSave(url); gfx.tool.setTool( // @ts-expect-error FIXME: resolve after gfx tool refactor @@ -180,6 +150,7 @@ export class EmbedCardCreateModal extends WithDisposable(ShadowlessElement) { } | { mode: 'edgeless'; + onSave: (url: string) => void; }; @property({ attribute: false }) @@ -210,6 +181,7 @@ export async function toggleEmbedCardCreateModal( } | { mode: 'edgeless'; + onSave: (url: string) => void; } ): Promise { host.selection.clear(); diff --git a/blocksuite/affine/block-bookmark/src/components/embed-card-modal/embed-card-edit-modal.ts b/blocksuite/affine/components/src/embed-card-modal/embed-card-edit-modal.ts similarity index 91% rename from blocksuite/affine/block-bookmark/src/components/embed-card-modal/embed-card-edit-modal.ts rename to blocksuite/affine/components/src/embed-card-modal/embed-card-edit-modal.ts index e8e1569f19..4714fa2b8b 100644 --- a/blocksuite/affine/block-bookmark/src/components/embed-card-modal/embed-card-edit-modal.ts +++ b/blocksuite/affine/components/src/embed-card-modal/embed-card-edit-modal.ts @@ -1,16 +1,8 @@ -import { - EmbedLinkedDocBlockComponent, - EmbedSyncedDocBlockComponent, -} from '@blocksuite/affine-block-embed'; -import { - notifyLinkedDocClearedAliases, - notifyLinkedDocSwitchedToCard, -} from '@blocksuite/affine-components/notification'; -import { toast } from '@blocksuite/affine-components/toast'; -import type { AliasInfo } from '@blocksuite/affine-model'; +import type { AliasInfo, LinkableEmbedModel } from '@blocksuite/affine-model'; import { EmbedLinkedDocModel, EmbedSyncedDocModel, + isInternalEmbedModel, } from '@blocksuite/affine-model'; import { type LinkEventType, @@ -37,8 +29,7 @@ import { choose } from 'lit/directives/choose.js'; import { classMap } from 'lit/directives/class-map.js'; import { live } from 'lit/directives/live.js'; -import type { LinkableEmbedModel } from './type.js'; -import { isInternalEmbedModel } from './type.js'; +import { toast } from '../toast'; export class EmbedCardEditModal extends SignalWatcher( WithDisposable(LitElement) @@ -171,14 +162,8 @@ export class EmbedCardEditModal extends SignalWatcher( this.model.doc.updateBlock(this.model, { title: null, description: null }); - if ( - this.isEmbedLinkedDocModel && - blockComponent instanceof EmbedLinkedDocBlockComponent - ) { - blockComponent.refreshData(); + this.onReset?.(std, blockComponent); - notifyLinkedDocClearedAliases(std); - } blockComponent.requestUpdate(); track(std, this.model, this.viewType, 'ResetedAlias', { control: 'reset' }); @@ -207,17 +192,7 @@ export class EmbedCardEditModal extends SignalWatcher( const props: AliasInfo = { title }; if (description) props.description = description; - if ( - this.isEmbedSyncedDocModel && - blockComponent instanceof EmbedSyncedDocBlockComponent - ) { - blockComponent.convertToCard(props); - - notifyLinkedDocSwitchedToCard(std); - } else { - this.model.doc.updateBlock(this.model, props); - blockComponent.requestUpdate(); - } + this.onSave?.(std, blockComponent, props); track(std, this.model, this.viewType, 'SavedAlias', { control: 'save' }); @@ -393,6 +368,20 @@ export class EmbedCardEditModal extends SignalWatcher( @property({ attribute: false }) accessor originalDocInfo: AliasInfo | undefined = undefined; + @property({ attribute: false }) + accessor onReset: + | ((std: BlockStdScope, component: BlockComponent) => void) + | undefined = undefined; + + @property({ attribute: false }) + accessor onSave: + | (( + std: BlockStdScope, + component: BlockComponent, + props: AliasInfo + ) => void) + | undefined = undefined; + accessor resetButtonDisabled$ = computed( () => !( @@ -418,7 +407,13 @@ export function toggleEmbedCardEditModal( host: EditorHost, embedCardModel: LinkableEmbedModel, viewType: string, - originalDocInfo?: AliasInfo + originalDocInfo?: AliasInfo, + onReset?: (std: BlockStdScope, component: BlockComponent) => void, + onSave?: ( + std: BlockStdScope, + component: BlockComponent, + props: AliasInfo + ) => void ) { document.body.querySelector('embed-card-edit-modal')?.remove(); @@ -427,6 +422,8 @@ export function toggleEmbedCardEditModal( embedCardEditModal.host = host; embedCardEditModal.viewType = viewType; embedCardEditModal.originalDocInfo = originalDocInfo; + embedCardEditModal.onReset = onReset; + embedCardEditModal.onSave = onSave; document.body.append(embedCardEditModal); } diff --git a/blocksuite/affine/components/src/embed-card-modal/index.ts b/blocksuite/affine/components/src/embed-card-modal/index.ts new file mode 100644 index 0000000000..7413958de7 --- /dev/null +++ b/blocksuite/affine/components/src/embed-card-modal/index.ts @@ -0,0 +1,16 @@ +import { EmbedCardEditCaptionEditModal } from './embed-card-caption-edit-modal'; +import { EmbedCardCreateModal } from './embed-card-create-modal'; +import { EmbedCardEditModal } from './embed-card-edit-modal'; + +export * from './embed-card-caption-edit-modal'; +export * from './embed-card-create-modal'; +export * from './embed-card-edit-modal'; + +export function effects() { + customElements.define( + 'embed-card-caption-edit-modal', + EmbedCardEditCaptionEditModal + ); + customElements.define('embed-card-create-modal', EmbedCardCreateModal); + customElements.define('embed-card-edit-modal', EmbedCardEditModal); +} diff --git a/blocksuite/affine/block-bookmark/src/components/embed-card-modal/styles.ts b/blocksuite/affine/components/src/embed-card-modal/styles.ts similarity index 100% rename from blocksuite/affine/block-bookmark/src/components/embed-card-modal/styles.ts rename to blocksuite/affine/components/src/embed-card-modal/styles.ts diff --git a/blocksuite/affine/model/src/blocks/embed/index.ts b/blocksuite/affine/model/src/blocks/embed/index.ts index 9f25b0e727..a47175311d 100644 --- a/blocksuite/affine/model/src/blocks/embed/index.ts +++ b/blocksuite/affine/model/src/blocks/embed/index.ts @@ -1,7 +1,8 @@ -export * from './figma/index.js'; -export * from './github/index.js'; -export * from './html/index.js'; -export * from './linked-doc/index.js'; -export * from './loom/index.js'; -export * from './synced-doc/index.js'; -export * from './youtube/index.js'; +export * from './figma/index'; +export * from './github/index'; +export * from './html/index'; +export * from './linked-doc/index'; +export * from './loom/index'; +export * from './synced-doc/index'; +export * from './types'; +export * from './youtube/index'; diff --git a/blocksuite/affine/model/src/blocks/embed/types.ts b/blocksuite/affine/model/src/blocks/embed/types.ts new file mode 100644 index 0000000000..9a4e1c685f --- /dev/null +++ b/blocksuite/affine/model/src/blocks/embed/types.ts @@ -0,0 +1,38 @@ +import { EmbedFigmaModel } from './figma'; +import { EmbedGithubModel } from './github'; +import type { EmbedHtmlModel } from './html'; +import { EmbedLinkedDocModel } from './linked-doc'; +import { EmbedLoomModel } from './loom'; +import { EmbedSyncedDocModel } from './synced-doc'; +import { EmbedYoutubeModel } from './youtube'; + +export type ExternalEmbedModel = + | EmbedFigmaModel + | EmbedGithubModel + | EmbedLoomModel + | EmbedYoutubeModel; + +export type InternalEmbedModel = EmbedLinkedDocModel | EmbedSyncedDocModel; + +export type LinkableEmbedModel = ExternalEmbedModel | InternalEmbedModel; + +export type BuiltInEmbedModel = LinkableEmbedModel | EmbedHtmlModel; + +export function isExternalEmbedModel( + model: BuiltInEmbedModel +): model is ExternalEmbedModel { + return ( + model instanceof EmbedFigmaModel || + model instanceof EmbedGithubModel || + model instanceof EmbedLoomModel || + model instanceof EmbedYoutubeModel + ); +} + +export function isInternalEmbedModel( + model: BuiltInEmbedModel +): model is InternalEmbedModel { + return ( + model instanceof EmbedLinkedDocModel || model instanceof EmbedSyncedDocModel + ); +} diff --git a/blocksuite/blocks/src/effects.ts b/blocksuite/blocks/src/effects.ts index 2afd8835d8..b58cd3c9b3 100644 --- a/blocksuite/blocks/src/effects.ts +++ b/blocksuite/blocks/src/effects.ts @@ -23,6 +23,7 @@ import { effects as componentColorPickerEffects } from '@blocksuite/affine-compo import { effects as componentContextMenuEffects } from '@blocksuite/affine-components/context-menu'; import { effects as componentDatePickerEffects } from '@blocksuite/affine-components/date-picker'; import { effects as componentDropIndicatorEffects } from '@blocksuite/affine-components/drop-indicator'; +import { effects as componentEmbedCardModalEffects } from '@blocksuite/affine-components/embed-card-modal'; import { FilterableListComponent } from '@blocksuite/affine-components/filterable-list'; import { IconButton } from '@blocksuite/affine-components/icon-button'; import { effects as componentPortalEffects } from '@blocksuite/affine-components/portal'; @@ -212,6 +213,7 @@ export function effects() { componentToggleButtonEffects(); componentAiItemEffects(); componentColorPickerEffects(); + componentEmbedCardModalEffects(); widgetScrollAnchoringEffects(); widgetMobileToolbarEffects(); diff --git a/blocksuite/blocks/src/root-block/utils/index.ts b/blocksuite/blocks/src/root-block/utils/index.ts index e066355e3f..8546fe26ec 100644 --- a/blocksuite/blocks/src/root-block/utils/index.ts +++ b/blocksuite/blocks/src/root-block/utils/index.ts @@ -1 +1,2 @@ -export * from './callback.js'; +export * from './callback'; +export * from './types'; diff --git a/blocksuite/affine/block-bookmark/src/components/embed-card-modal/type.ts b/blocksuite/blocks/src/root-block/utils/types.ts similarity index 60% rename from blocksuite/affine/block-bookmark/src/components/embed-card-modal/type.ts rename to blocksuite/blocks/src/root-block/utils/types.ts index c420b8cb73..4f2c1d742e 100644 --- a/blocksuite/affine/block-bookmark/src/components/embed-card-modal/type.ts +++ b/blocksuite/blocks/src/root-block/utils/types.ts @@ -1,3 +1,4 @@ +import { BookmarkBlockComponent } from '@blocksuite/affine-block-bookmark'; import { EmbedFigmaBlockComponent, EmbedGithubBlockComponent, @@ -7,22 +8,8 @@ import { EmbedSyncedDocBlockComponent, EmbedYoutubeBlockComponent, } from '@blocksuite/affine-block-embed'; -import type { - BookmarkBlockModel, - EmbedFigmaModel, - EmbedGithubModel, - EmbedHtmlModel, - EmbedLoomModel, - EmbedYoutubeModel, -} from '@blocksuite/affine-model'; -import { - EmbedLinkedDocModel, - EmbedSyncedDocModel, -} from '@blocksuite/affine-model'; import type { BlockComponent } from '@blocksuite/block-std'; -import { BookmarkBlockComponent } from '../../bookmark-block'; - export type ExternalEmbedBlockComponent = | BookmarkBlockComponent | EmbedFigmaBlockComponent @@ -42,19 +29,6 @@ export type BuiltInEmbedBlockComponent = | LinkableEmbedBlockComponent | EmbedHtmlBlockComponent; -export type ExternalEmbedModel = - | BookmarkBlockModel - | EmbedFigmaModel - | EmbedGithubModel - | EmbedLoomModel - | EmbedYoutubeModel; - -export type InternalEmbedModel = EmbedLinkedDocModel | EmbedSyncedDocModel; - -export type LinkableEmbedModel = ExternalEmbedModel | InternalEmbedModel; - -export type BuiltInEmbedModel = LinkableEmbedModel | EmbedHtmlModel; - export function isEmbedCardBlockComponent( block: BlockComponent ): block is BuiltInEmbedBlockComponent { @@ -69,11 +43,3 @@ export function isEmbedCardBlockComponent( block instanceof EmbedSyncedDocBlockComponent ); } - -export function isInternalEmbedModel( - model: BuiltInEmbedModel -): model is InternalEmbedModel { - return ( - model instanceof EmbedLinkedDocModel || model instanceof EmbedSyncedDocModel - ); -} diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-embed-card-button.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-embed-card-button.ts index 25d6e71e52..68e89c7020 100644 --- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-embed-card-button.ts +++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-embed-card-button.ts @@ -1,12 +1,7 @@ -import type { - BuiltInEmbedBlockComponent, - BuiltInEmbedModel, -} from '@blocksuite/affine-block-bookmark'; -import { - isInternalEmbedModel, - toggleEmbedCardEditModal, -} from '@blocksuite/affine-block-bookmark'; +import {} from '@blocksuite/affine-block-bookmark'; import { + EmbedLinkedDocBlockComponent, + EmbedSyncedDocBlockComponent, getDocContentWithMaxLength, getEmbedCardIcons, } from '@blocksuite/affine-block-embed'; @@ -14,6 +9,7 @@ import { EdgelessCRUDIdentifier, reassociateConnectorsCommand, } from '@blocksuite/affine-block-surface'; +import { toggleEmbedCardEditModal } from '@blocksuite/affine-components/embed-card-modal'; import { CaptionIcon, CopyIcon, @@ -23,7 +19,11 @@ import { PaletteIcon, SmallArrowDownIcon, } from '@blocksuite/affine-components/icons'; -import { notifyLinkedDocSwitchedToEmbed } from '@blocksuite/affine-components/notification'; +import { + notifyLinkedDocClearedAliases, + notifyLinkedDocSwitchedToCard, + notifyLinkedDocSwitchedToEmbed, +} from '@blocksuite/affine-components/notification'; import { isPeekable, peek } from '@blocksuite/affine-components/peek'; import { toast } from '@blocksuite/affine-components/toast'; import { @@ -33,7 +33,9 @@ import { import { type AliasInfo, BookmarkStyles, + type BuiltInEmbedModel, type EmbedCardStyle, + isInternalEmbedModel, } from '@blocksuite/affine-model'; import { EMBED_CARD_HEIGHT, @@ -69,6 +71,7 @@ import { isEmbedLinkedDocBlock, isEmbedSyncedDocBlock, } from '../../edgeless/utils/query.js'; +import type { BuiltInEmbedBlockComponent } from '../../utils/types'; export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) { static override styles = css` @@ -287,7 +290,30 @@ export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) { this.std.host, this.model, this._viewType, - originalDocInfo + originalDocInfo, + (std, component) => { + if ( + isEmbedLinkedDocBlock(this.model) && + component instanceof EmbedLinkedDocBlockComponent + ) { + component.refreshData(); + + notifyLinkedDocClearedAliases(std); + } + }, + (std, component, props) => { + if ( + isEmbedSyncedDocBlock(this.model) && + component instanceof EmbedSyncedDocBlockComponent + ) { + component.convertToCard(props); + + notifyLinkedDocSwitchedToCard(std); + } else { + this.model.doc.updateBlock(this.model, props); + component.requestUpdate(); + } + } ); track(this.std, this.model, this._viewType, 'OpenedAliasPopup', { diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/index.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/index.ts index 52c1b30e89..97182d4d2f 100644 --- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/index.ts +++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/index.ts @@ -1,4 +1,3 @@ -import type { BuiltInEmbedModel } from '@blocksuite/affine-block-bookmark'; import { isNoteBlock } from '@blocksuite/affine-block-surface'; import { ConnectorCWithArrowIcon } from '@blocksuite/affine-components/icons'; import { @@ -12,6 +11,7 @@ import { import type { AttachmentBlockModel, BrushElementModel, + BuiltInEmbedModel, ConnectorElementModel, EdgelessTextBlockModel, FrameBlockModel, diff --git a/blocksuite/blocks/src/root-block/widgets/embed-card-toolbar/context.ts b/blocksuite/blocks/src/root-block/widgets/embed-card-toolbar/context.ts index 549a1c9ffa..e4cb7f791a 100644 --- a/blocksuite/blocks/src/root-block/widgets/embed-card-toolbar/context.ts +++ b/blocksuite/blocks/src/root-block/widgets/embed-card-toolbar/context.ts @@ -1,6 +1,7 @@ -import type { BuiltInEmbedBlockComponent } from '@blocksuite/affine-block-bookmark'; import { MenuContext } from '@blocksuite/affine-components/toolbar'; +import type { BuiltInEmbedBlockComponent } from '../../utils'; + export class EmbedCardToolbarContext extends MenuContext { override close = () => { this.abortController.abort(); diff --git a/blocksuite/blocks/src/root-block/widgets/embed-card-toolbar/embed-card-toolbar.ts b/blocksuite/blocks/src/root-block/widgets/embed-card-toolbar/embed-card-toolbar.ts index d11fff94fe..e478945c8e 100644 --- a/blocksuite/blocks/src/root-block/widgets/embed-card-toolbar/embed-card-toolbar.ts +++ b/blocksuite/blocks/src/root-block/widgets/embed-card-toolbar/embed-card-toolbar.ts @@ -1,15 +1,13 @@ import { - type BuiltInEmbedBlockComponent, - type BuiltInEmbedModel, - isEmbedCardBlockComponent, - isInternalEmbedModel, - toggleEmbedCardCaptionEditModal, - toggleEmbedCardEditModal, -} from '@blocksuite/affine-block-bookmark'; -import { + EmbedLinkedDocBlockComponent, + EmbedSyncedDocBlockComponent, getDocContentWithMaxLength, getEmbedCardIcons, } from '@blocksuite/affine-block-embed'; +import { + toggleEmbedCardCaptionEditModal, + toggleEmbedCardEditModal, +} from '@blocksuite/affine-components/embed-card-modal'; import { CaptionIcon, CopyIcon, @@ -19,7 +17,11 @@ import { PaletteIcon, SmallArrowDownIcon, } from '@blocksuite/affine-components/icons'; -import { notifyLinkedDocSwitchedToEmbed } from '@blocksuite/affine-components/notification'; +import { + notifyLinkedDocClearedAliases, + notifyLinkedDocSwitchedToCard, + notifyLinkedDocSwitchedToEmbed, +} from '@blocksuite/affine-components/notification'; import { isPeekable, peek } from '@blocksuite/affine-components/peek'; import { toast } from '@blocksuite/affine-components/toast'; import { @@ -34,9 +36,11 @@ import { type AliasInfo, type BookmarkBlockModel, BookmarkStyles, + type BuiltInEmbedModel, type EmbedCardStyle, type EmbedGithubModel, type EmbedLinkedDocModel, + isInternalEmbedModel, type RootBlockModel, } from '@blocksuite/affine-model'; import { @@ -76,6 +80,10 @@ import { isEmbedSyncedDocBlock, } from '../../edgeless/utils/query.js'; import type { RootBlockComponent } from '../../types.js'; +import { + type BuiltInEmbedBlockComponent, + isEmbedCardBlockComponent, +} from '../../utils/types'; import { BUILT_IN_GROUPS } from './config.js'; import { EmbedCardToolbarContext } from './context.js'; import { embedCardToolbarStyle } from './styles.js'; @@ -127,7 +135,35 @@ export class EmbedCardToolbar extends WidgetComponent< this._hide(); - toggleEmbedCardEditModal(this.host, model, this._viewType, originalDocInfo); + toggleEmbedCardEditModal( + this.host, + model, + this._viewType, + originalDocInfo, + (std, component) => { + if ( + isEmbedLinkedDocBlock(model) && + component instanceof EmbedLinkedDocBlockComponent + ) { + component.refreshData(); + + notifyLinkedDocClearedAliases(std); + } + }, + (std, component, props) => { + if ( + isEmbedSyncedDocBlock(model) && + component instanceof EmbedSyncedDocBlockComponent + ) { + component.convertToCard(props); + + notifyLinkedDocSwitchedToCard(std); + } else { + this.model.doc.updateBlock(model, props); + component.requestUpdate(); + } + } + ); track(this.std, model, this._viewType, 'OpenedAliasPopup', { control: 'edit', diff --git a/blocksuite/blocks/src/root-block/widgets/keyboard-toolbar/config.ts b/blocksuite/blocks/src/root-block/widgets/keyboard-toolbar/config.ts index 16877420d9..44adc8fae6 100644 --- a/blocksuite/blocks/src/root-block/widgets/keyboard-toolbar/config.ts +++ b/blocksuite/blocks/src/root-block/widgets/keyboard-toolbar/config.ts @@ -1,5 +1,4 @@ import { addSiblingAttachmentBlocks } from '@blocksuite/affine-block-attachment'; -import { toggleEmbedCardCreateModal } from '@blocksuite/affine-block-bookmark'; import { insertDatabaseBlockCommand } from '@blocksuite/affine-block-database'; import { insertImagesCommand } from '@blocksuite/affine-block-image'; import { insertLatexBlockCommand } from '@blocksuite/affine-block-latex'; @@ -18,6 +17,7 @@ import { } from '@blocksuite/affine-block-paragraph'; import { getSurfaceBlock } from '@blocksuite/affine-block-surface'; import { insertSurfaceRefBlockCommand } from '@blocksuite/affine-block-surface-ref'; +import { toggleEmbedCardCreateModal } from '@blocksuite/affine-components/embed-card-modal'; import { formatBlockCommand, formatNativeCommand, diff --git a/blocksuite/blocks/src/root-block/widgets/slash-menu/config.ts b/blocksuite/blocks/src/root-block/widgets/slash-menu/config.ts index ddda815b5a..b58f9263cb 100644 --- a/blocksuite/blocks/src/root-block/widgets/slash-menu/config.ts +++ b/blocksuite/blocks/src/root-block/widgets/slash-menu/config.ts @@ -1,5 +1,4 @@ import { addSiblingAttachmentBlocks } from '@blocksuite/affine-block-attachment'; -import { toggleEmbedCardCreateModal } from '@blocksuite/affine-block-bookmark'; import type { DataViewBlockComponent } from '@blocksuite/affine-block-data-view'; import { insertDatabaseBlockCommand } from '@blocksuite/affine-block-database'; import { @@ -13,6 +12,7 @@ import { insertLatexBlockCommand } from '@blocksuite/affine-block-latex'; import { 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 { ArrowDownBigIcon, ArrowUpBigIcon, diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts index 0a46715589..9febb40b32 100644 --- a/tools/utils/src/workspace.gen.ts +++ b/tools/utils/src/workspace.gen.ts @@ -34,7 +34,6 @@ export const PackageList = [ name: '@blocksuite/affine-block-bookmark', workspaceDependencies: [ 'blocksuite/affine/block-embed', - 'blocksuite/affine/block-surface', 'blocksuite/affine/components', 'blocksuite/affine/model', 'blocksuite/affine/shared', diff --git a/yarn.lock b/yarn.lock index 68d524a2e1..be070aac16 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3298,7 +3298,6 @@ __metadata: resolution: "@blocksuite/affine-block-bookmark@workspace:blocksuite/affine/block-bookmark" dependencies: "@blocksuite/affine-block-embed": "workspace:*" - "@blocksuite/affine-block-surface": "workspace:*" "@blocksuite/affine-components": "workspace:*" "@blocksuite/affine-model": "workspace:*" "@blocksuite/affine-shared": "workspace:*"