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

refactor(editor): move embed-card-modal to components (#10037)

Browse Source
This commit is contained in:
fundon
2025-02-10 10:56:13 +00:00
parent 397887e3b5
commit d03744688b
24 changed files with 189 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
blocksuite/affine/block-bookmark/package.json
View File

@@ -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:*",

4
blocksuite/affine/block-bookmark/src/components/embed-card-modal/index.ts
View File

@@ -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';

79
blocksuite/affine/block-bookmark/src/components/embed-card-modal/type.ts
View File

@@ -1,79 +0,0 @@
import {
EmbedFigmaBlockComponent,
EmbedGithubBlockComponent,
EmbedHtmlBlockComponent,
EmbedLinkedDocBlockComponent,
EmbedLoomBlockComponent,
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
| EmbedGithubBlockComponent
| EmbedLoomBlockComponent
| EmbedYoutubeBlockComponent;
export type InternalEmbedBlockComponent =
| EmbedLinkedDocBlockComponent
| EmbedSyncedDocBlockComponent;
export type LinkableEmbedBlockComponent =
| ExternalEmbedBlockComponent
| InternalEmbedBlockComponent;
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 {
return (
block instanceof BookmarkBlockComponent ||
block instanceof EmbedFigmaBlockComponent ||
block instanceof EmbedGithubBlockComponent ||
block instanceof EmbedHtmlBlockComponent ||
block instanceof EmbedLoomBlockComponent ||
block instanceof EmbedYoutubeBlockComponent ||
block instanceof EmbedLinkedDocBlockComponent ||
block instanceof EmbedSyncedDocBlockComponent
);
}
export function isInternalEmbedModel(
model: BuiltInEmbedModel
): model is InternalEmbedModel {
return (
model instanceof EmbedLinkedDocModel || model instanceof EmbedSyncedDocModel
);
}

1
blocksuite/affine/block-bookmark/src/components/index.ts
View File

@@ -1,2 +1 @@
export * from './bookmark-card';
export * from './embed-card-modal';

12
blocksuite/affine/block-bookmark/src/effects.ts
View File

@@ -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
);
}

1
blocksuite/affine/block-bookmark/tsconfig.json
View File

@@ -8,7 +8,6 @@
"include": ["./src"],
"references": [
{ "path": "../block-embed" },
{ "path": "../block-surface" },
{ "path": "../components" },
{ "path": "../model" },
{ "path": "../shared" },

3
blocksuite/affine/components/package.json
View File

@@ -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",

0
blocksuite/affine/block-bookmark/src/components/embed-card-modal/embed-card-caption-edit-modal.ts → blocksuite/affine/components/src/embed-card-modal/embed-card-caption-edit-modal.ts
View File

38
blocksuite/affine/block-bookmark/src/components/embed-card-modal/embed-card-create-modal.ts → blocksuite/affine/components/src/embed-card-modal/embed-card-create-modal.ts
View File

@@ -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<void> {
host.selection.clear();

59
blocksuite/affine/block-bookmark/src/components/embed-card-modal/embed-card-edit-modal.ts → blocksuite/affine/components/src/embed-card-modal/embed-card-edit-modal.ts
View File

@@ -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<boolean>(
() =>
!(
@@ -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);
}

16
blocksuite/affine/components/src/embed-card-modal/index.ts Normal file
View File

@@ -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);
}

0
blocksuite/affine/block-bookmark/src/components/embed-card-modal/styles.ts → blocksuite/affine/components/src/embed-card-modal/styles.ts
View File

15
blocksuite/affine/model/src/blocks/embed/index.ts
View File

@@ -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';

38
blocksuite/affine/model/src/blocks/embed/types.ts Normal file
View File

@@ -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
);
}