refactor(editor): move embed-card-modal to components (#10037)
This commit is contained in:
@@ -14,7 +14,6 @@
|
|||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@blocksuite/affine-block-embed": "workspace:*",
|
"@blocksuite/affine-block-embed": "workspace:*",
|
||||||
"@blocksuite/affine-block-surface": "workspace:*",
|
|
||||||
"@blocksuite/affine-components": "workspace:*",
|
"@blocksuite/affine-components": "workspace:*",
|
||||||
"@blocksuite/affine-model": "workspace:*",
|
"@blocksuite/affine-model": "workspace:*",
|
||||||
"@blocksuite/affine-shared": "workspace:*",
|
"@blocksuite/affine-shared": "workspace:*",
|
||||||
|
|||||||
@@ -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';
|
|
||||||
@@ -1,2 +1 @@
|
|||||||
export * from './bookmark-card';
|
export * from './bookmark-card';
|
||||||
export * from './embed-card-modal';
|
|
||||||
|
|||||||
@@ -1,11 +1,6 @@
|
|||||||
import { BookmarkBlockComponent } from './bookmark-block';
|
import { BookmarkBlockComponent } from './bookmark-block';
|
||||||
import { BookmarkEdgelessBlockComponent } from './bookmark-edgeless-block';
|
import { BookmarkEdgelessBlockComponent } from './bookmark-edgeless-block';
|
||||||
import { BookmarkCard } from './components/bookmark-card';
|
import { BookmarkCard } from './components/bookmark-card';
|
||||||
import {
|
|
||||||
EmbedCardCreateModal,
|
|
||||||
EmbedCardEditCaptionEditModal,
|
|
||||||
EmbedCardEditModal,
|
|
||||||
} from './components/embed-card-modal';
|
|
||||||
|
|
||||||
export function effects() {
|
export function effects() {
|
||||||
customElements.define(
|
customElements.define(
|
||||||
@@ -14,11 +9,4 @@ export function effects() {
|
|||||||
);
|
);
|
||||||
customElements.define('affine-bookmark', BookmarkBlockComponent);
|
customElements.define('affine-bookmark', BookmarkBlockComponent);
|
||||||
customElements.define('bookmark-card', BookmarkCard);
|
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
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,7 +8,6 @@
|
|||||||
"include": ["./src"],
|
"include": ["./src"],
|
||||||
"references": [
|
"references": [
|
||||||
{ "path": "../block-embed" },
|
{ "path": "../block-embed" },
|
||||||
{ "path": "../block-surface" },
|
|
||||||
{ "path": "../components" },
|
{ "path": "../components" },
|
||||||
{ "path": "../model" },
|
{ "path": "../model" },
|
||||||
{ "path": "../shared" },
|
{ "path": "../shared" },
|
||||||
|
|||||||
@@ -62,7 +62,8 @@
|
|||||||
"./notification": "./src/notification/index.ts",
|
"./notification": "./src/notification/index.ts",
|
||||||
"./block-zero-width": "./src/block-zero-width/index.ts",
|
"./block-zero-width": "./src/block-zero-width/index.ts",
|
||||||
"./block-selection": "./src/block-selection/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": [
|
"files": [
|
||||||
"src",
|
"src",
|
||||||
|
|||||||
@@ -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 { EmbedOptionProvider } from '@blocksuite/affine-shared/services';
|
||||||
import { isValidUrl, stopPropagation } from '@blocksuite/affine-shared/utils';
|
import { isValidUrl, stopPropagation } from '@blocksuite/affine-shared/utils';
|
||||||
import type { EditorHost } from '@blocksuite/block-std';
|
import type { EditorHost } from '@blocksuite/block-std';
|
||||||
import { ShadowlessElement } from '@blocksuite/block-std';
|
import { ShadowlessElement } from '@blocksuite/block-std';
|
||||||
import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
|
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 type { BlockModel } from '@blocksuite/store';
|
||||||
import { html } from 'lit';
|
import { html } from 'lit';
|
||||||
import { property, query, state } from 'lit/decorators.js';
|
import { property, query, state } from 'lit/decorators.js';
|
||||||
import { classMap } from 'lit/directives/class-map.js';
|
import { classMap } from 'lit/directives/class-map.js';
|
||||||
|
|
||||||
|
import { toast } from '../toast';
|
||||||
import { embedCardModalStyles } from './styles.js';
|
import { embedCardModalStyles } from './styles.js';
|
||||||
|
|
||||||
export class EmbedCardCreateModal extends WithDisposable(ShadowlessElement) {
|
export class EmbedCardCreateModal extends WithDisposable(ShadowlessElement) {
|
||||||
@@ -55,37 +49,13 @@ export class EmbedCardCreateModal extends WithDisposable(ShadowlessElement) {
|
|||||||
index
|
index
|
||||||
);
|
);
|
||||||
} else if (mode === 'edgeless') {
|
} 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 gfx = this.host.std.get(GfxControllerIdentifier);
|
||||||
const crud = this.host.std.get(EdgelessCRUDIdentifier);
|
|
||||||
|
|
||||||
const viewport = gfx.viewport;
|
|
||||||
const surfaceModel = gfx.surface;
|
const surfaceModel = gfx.surface;
|
||||||
if (!surfaceModel) {
|
if (!surfaceModel) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const center = Vec.toVec(viewport.center);
|
this.createOptions.onSave(url);
|
||||||
crud.addBlock(
|
|
||||||
flavour,
|
|
||||||
{
|
|
||||||
url,
|
|
||||||
xywh: Bound.fromCenter(
|
|
||||||
center,
|
|
||||||
EMBED_CARD_WIDTH[targetStyle],
|
|
||||||
EMBED_CARD_HEIGHT[targetStyle]
|
|
||||||
).serialize(),
|
|
||||||
style: targetStyle,
|
|
||||||
},
|
|
||||||
surfaceModel
|
|
||||||
);
|
|
||||||
|
|
||||||
gfx.tool.setTool(
|
gfx.tool.setTool(
|
||||||
// @ts-expect-error FIXME: resolve after gfx tool refactor
|
// @ts-expect-error FIXME: resolve after gfx tool refactor
|
||||||
@@ -180,6 +150,7 @@ export class EmbedCardCreateModal extends WithDisposable(ShadowlessElement) {
|
|||||||
}
|
}
|
||||||
| {
|
| {
|
||||||
mode: 'edgeless';
|
mode: 'edgeless';
|
||||||
|
onSave: (url: string) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
@property({ attribute: false })
|
@property({ attribute: false })
|
||||||
@@ -210,6 +181,7 @@ export async function toggleEmbedCardCreateModal(
|
|||||||
}
|
}
|
||||||
| {
|
| {
|
||||||
mode: 'edgeless';
|
mode: 'edgeless';
|
||||||
|
onSave: (url: string) => void;
|
||||||
}
|
}
|
||||||
): Promise<void> {
|
): Promise<void> {
|
||||||
host.selection.clear();
|
host.selection.clear();
|
||||||
@@ -1,16 +1,8 @@
|
|||||||
import {
|
import type { AliasInfo, LinkableEmbedModel } from '@blocksuite/affine-model';
|
||||||
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 {
|
import {
|
||||||
EmbedLinkedDocModel,
|
EmbedLinkedDocModel,
|
||||||
EmbedSyncedDocModel,
|
EmbedSyncedDocModel,
|
||||||
|
isInternalEmbedModel,
|
||||||
} from '@blocksuite/affine-model';
|
} from '@blocksuite/affine-model';
|
||||||
import {
|
import {
|
||||||
type LinkEventType,
|
type LinkEventType,
|
||||||
@@ -37,8 +29,7 @@ import { choose } from 'lit/directives/choose.js';
|
|||||||
import { classMap } from 'lit/directives/class-map.js';
|
import { classMap } from 'lit/directives/class-map.js';
|
||||||
import { live } from 'lit/directives/live.js';
|
import { live } from 'lit/directives/live.js';
|
||||||
|
|
||||||
import type { LinkableEmbedModel } from './type.js';
|
import { toast } from '../toast';
|
||||||
import { isInternalEmbedModel } from './type.js';
|
|
||||||
|
|
||||||
export class EmbedCardEditModal extends SignalWatcher(
|
export class EmbedCardEditModal extends SignalWatcher(
|
||||||
WithDisposable(LitElement)
|
WithDisposable(LitElement)
|
||||||
@@ -171,14 +162,8 @@ export class EmbedCardEditModal extends SignalWatcher(
|
|||||||
|
|
||||||
this.model.doc.updateBlock(this.model, { title: null, description: null });
|
this.model.doc.updateBlock(this.model, { title: null, description: null });
|
||||||
|
|
||||||
if (
|
this.onReset?.(std, blockComponent);
|
||||||
this.isEmbedLinkedDocModel &&
|
|
||||||
blockComponent instanceof EmbedLinkedDocBlockComponent
|
|
||||||
) {
|
|
||||||
blockComponent.refreshData();
|
|
||||||
|
|
||||||
notifyLinkedDocClearedAliases(std);
|
|
||||||
}
|
|
||||||
blockComponent.requestUpdate();
|
blockComponent.requestUpdate();
|
||||||
|
|
||||||
track(std, this.model, this.viewType, 'ResetedAlias', { control: 'reset' });
|
track(std, this.model, this.viewType, 'ResetedAlias', { control: 'reset' });
|
||||||
@@ -207,17 +192,7 @@ export class EmbedCardEditModal extends SignalWatcher(
|
|||||||
const props: AliasInfo = { title };
|
const props: AliasInfo = { title };
|
||||||
if (description) props.description = description;
|
if (description) props.description = description;
|
||||||
|
|
||||||
if (
|
this.onSave?.(std, blockComponent, props);
|
||||||
this.isEmbedSyncedDocModel &&
|
|
||||||
blockComponent instanceof EmbedSyncedDocBlockComponent
|
|
||||||
) {
|
|
||||||
blockComponent.convertToCard(props);
|
|
||||||
|
|
||||||
notifyLinkedDocSwitchedToCard(std);
|
|
||||||
} else {
|
|
||||||
this.model.doc.updateBlock(this.model, props);
|
|
||||||
blockComponent.requestUpdate();
|
|
||||||
}
|
|
||||||
|
|
||||||
track(std, this.model, this.viewType, 'SavedAlias', { control: 'save' });
|
track(std, this.model, this.viewType, 'SavedAlias', { control: 'save' });
|
||||||
|
|
||||||
@@ -393,6 +368,20 @@ export class EmbedCardEditModal extends SignalWatcher(
|
|||||||
@property({ attribute: false })
|
@property({ attribute: false })
|
||||||
accessor originalDocInfo: AliasInfo | undefined = undefined;
|
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>(
|
accessor resetButtonDisabled$ = computed<boolean>(
|
||||||
() =>
|
() =>
|
||||||
!(
|
!(
|
||||||
@@ -418,7 +407,13 @@ export function toggleEmbedCardEditModal(
|
|||||||
host: EditorHost,
|
host: EditorHost,
|
||||||
embedCardModel: LinkableEmbedModel,
|
embedCardModel: LinkableEmbedModel,
|
||||||
viewType: string,
|
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();
|
document.body.querySelector('embed-card-edit-modal')?.remove();
|
||||||
|
|
||||||
@@ -427,6 +422,8 @@ export function toggleEmbedCardEditModal(
|
|||||||
embedCardEditModal.host = host;
|
embedCardEditModal.host = host;
|
||||||
embedCardEditModal.viewType = viewType;
|
embedCardEditModal.viewType = viewType;
|
||||||
embedCardEditModal.originalDocInfo = originalDocInfo;
|
embedCardEditModal.originalDocInfo = originalDocInfo;
|
||||||
|
embedCardEditModal.onReset = onReset;
|
||||||
|
embedCardEditModal.onSave = onSave;
|
||||||
document.body.append(embedCardEditModal);
|
document.body.append(embedCardEditModal);
|
||||||
}
|
}
|
||||||
|
|
||||||
16
blocksuite/affine/components/src/embed-card-modal/index.ts
Normal file
16
blocksuite/affine/components/src/embed-card-modal/index.ts
Normal 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);
|
||||||
|
}
|
||||||
@@ -1,7 +1,8 @@
|
|||||||
export * from './figma/index.js';
|
export * from './figma/index';
|
||||||
export * from './github/index.js';
|
export * from './github/index';
|
||||||
export * from './html/index.js';
|
export * from './html/index';
|
||||||
export * from './linked-doc/index.js';
|
export * from './linked-doc/index';
|
||||||
export * from './loom/index.js';
|
export * from './loom/index';
|
||||||
export * from './synced-doc/index.js';
|
export * from './synced-doc/index';
|
||||||
export * from './youtube/index.js';
|
export * from './types';
|
||||||
|
export * from './youtube/index';
|
||||||
|
|||||||
38
blocksuite/affine/model/src/blocks/embed/types.ts
Normal file
38
blocksuite/affine/model/src/blocks/embed/types.ts
Normal 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
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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 componentContextMenuEffects } from '@blocksuite/affine-components/context-menu';
|
||||||
import { effects as componentDatePickerEffects } from '@blocksuite/affine-components/date-picker';
|
import { effects as componentDatePickerEffects } from '@blocksuite/affine-components/date-picker';
|
||||||
import { effects as componentDropIndicatorEffects } from '@blocksuite/affine-components/drop-indicator';
|
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 { FilterableListComponent } from '@blocksuite/affine-components/filterable-list';
|
||||||
import { IconButton } from '@blocksuite/affine-components/icon-button';
|
import { IconButton } from '@blocksuite/affine-components/icon-button';
|
||||||
import { effects as componentPortalEffects } from '@blocksuite/affine-components/portal';
|
import { effects as componentPortalEffects } from '@blocksuite/affine-components/portal';
|
||||||
@@ -212,6 +213,7 @@ export function effects() {
|
|||||||
componentToggleButtonEffects();
|
componentToggleButtonEffects();
|
||||||
componentAiItemEffects();
|
componentAiItemEffects();
|
||||||
componentColorPickerEffects();
|
componentColorPickerEffects();
|
||||||
|
componentEmbedCardModalEffects();
|
||||||
|
|
||||||
widgetScrollAnchoringEffects();
|
widgetScrollAnchoringEffects();
|
||||||
widgetMobileToolbarEffects();
|
widgetMobileToolbarEffects();
|
||||||
|
|||||||
@@ -1 +1,2 @@
|
|||||||
export * from './callback.js';
|
export * from './callback';
|
||||||
|
export * from './types';
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import { BookmarkBlockComponent } from '@blocksuite/affine-block-bookmark';
|
||||||
import {
|
import {
|
||||||
EmbedFigmaBlockComponent,
|
EmbedFigmaBlockComponent,
|
||||||
EmbedGithubBlockComponent,
|
EmbedGithubBlockComponent,
|
||||||
@@ -7,22 +8,8 @@ import {
|
|||||||
EmbedSyncedDocBlockComponent,
|
EmbedSyncedDocBlockComponent,
|
||||||
EmbedYoutubeBlockComponent,
|
EmbedYoutubeBlockComponent,
|
||||||
} from '@blocksuite/affine-block-embed';
|
} 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 type { BlockComponent } from '@blocksuite/block-std';
|
||||||
|
|
||||||
import { BookmarkBlockComponent } from '../../bookmark-block';
|
|
||||||
|
|
||||||
export type ExternalEmbedBlockComponent =
|
export type ExternalEmbedBlockComponent =
|
||||||
| BookmarkBlockComponent
|
| BookmarkBlockComponent
|
||||||
| EmbedFigmaBlockComponent
|
| EmbedFigmaBlockComponent
|
||||||
@@ -42,19 +29,6 @@ export type BuiltInEmbedBlockComponent =
|
|||||||
| LinkableEmbedBlockComponent
|
| LinkableEmbedBlockComponent
|
||||||
| EmbedHtmlBlockComponent;
|
| 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(
|
export function isEmbedCardBlockComponent(
|
||||||
block: BlockComponent
|
block: BlockComponent
|
||||||
): block is BuiltInEmbedBlockComponent {
|
): block is BuiltInEmbedBlockComponent {
|
||||||
@@ -69,11 +43,3 @@ export function isEmbedCardBlockComponent(
|
|||||||
block instanceof EmbedSyncedDocBlockComponent
|
block instanceof EmbedSyncedDocBlockComponent
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function isInternalEmbedModel(
|
|
||||||
model: BuiltInEmbedModel
|
|
||||||
): model is InternalEmbedModel {
|
|
||||||
return (
|
|
||||||
model instanceof EmbedLinkedDocModel || model instanceof EmbedSyncedDocModel
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,12 +1,7 @@
|
|||||||
import type {
|
import {} from '@blocksuite/affine-block-bookmark';
|
||||||
BuiltInEmbedBlockComponent,
|
|
||||||
BuiltInEmbedModel,
|
|
||||||
} from '@blocksuite/affine-block-bookmark';
|
|
||||||
import {
|
|
||||||
isInternalEmbedModel,
|
|
||||||
toggleEmbedCardEditModal,
|
|
||||||
} from '@blocksuite/affine-block-bookmark';
|
|
||||||
import {
|
import {
|
||||||
|
EmbedLinkedDocBlockComponent,
|
||||||
|
EmbedSyncedDocBlockComponent,
|
||||||
getDocContentWithMaxLength,
|
getDocContentWithMaxLength,
|
||||||
getEmbedCardIcons,
|
getEmbedCardIcons,
|
||||||
} from '@blocksuite/affine-block-embed';
|
} from '@blocksuite/affine-block-embed';
|
||||||
@@ -14,6 +9,7 @@ import {
|
|||||||
EdgelessCRUDIdentifier,
|
EdgelessCRUDIdentifier,
|
||||||
reassociateConnectorsCommand,
|
reassociateConnectorsCommand,
|
||||||
} from '@blocksuite/affine-block-surface';
|
} from '@blocksuite/affine-block-surface';
|
||||||
|
import { toggleEmbedCardEditModal } from '@blocksuite/affine-components/embed-card-modal';
|
||||||
import {
|
import {
|
||||||
CaptionIcon,
|
CaptionIcon,
|
||||||
CopyIcon,
|
CopyIcon,
|
||||||
@@ -23,7 +19,11 @@ import {
|
|||||||
PaletteIcon,
|
PaletteIcon,
|
||||||
SmallArrowDownIcon,
|
SmallArrowDownIcon,
|
||||||
} from '@blocksuite/affine-components/icons';
|
} 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 { isPeekable, peek } from '@blocksuite/affine-components/peek';
|
||||||
import { toast } from '@blocksuite/affine-components/toast';
|
import { toast } from '@blocksuite/affine-components/toast';
|
||||||
import {
|
import {
|
||||||
@@ -33,7 +33,9 @@ import {
|
|||||||
import {
|
import {
|
||||||
type AliasInfo,
|
type AliasInfo,
|
||||||
BookmarkStyles,
|
BookmarkStyles,
|
||||||
|
type BuiltInEmbedModel,
|
||||||
type EmbedCardStyle,
|
type EmbedCardStyle,
|
||||||
|
isInternalEmbedModel,
|
||||||
} from '@blocksuite/affine-model';
|
} from '@blocksuite/affine-model';
|
||||||
import {
|
import {
|
||||||
EMBED_CARD_HEIGHT,
|
EMBED_CARD_HEIGHT,
|
||||||
@@ -69,6 +71,7 @@ import {
|
|||||||
isEmbedLinkedDocBlock,
|
isEmbedLinkedDocBlock,
|
||||||
isEmbedSyncedDocBlock,
|
isEmbedSyncedDocBlock,
|
||||||
} from '../../edgeless/utils/query.js';
|
} from '../../edgeless/utils/query.js';
|
||||||
|
import type { BuiltInEmbedBlockComponent } from '../../utils/types';
|
||||||
|
|
||||||
export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
|
export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
|
||||||
static override styles = css`
|
static override styles = css`
|
||||||
@@ -287,7 +290,30 @@ export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
|
|||||||
this.std.host,
|
this.std.host,
|
||||||
this.model,
|
this.model,
|
||||||
this._viewType,
|
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', {
|
track(this.std, this.model, this._viewType, 'OpenedAliasPopup', {
|
||||||
|
|||||||
@@ -1,4 +1,3 @@
|
|||||||
import type { BuiltInEmbedModel } from '@blocksuite/affine-block-bookmark';
|
|
||||||
import { isNoteBlock } from '@blocksuite/affine-block-surface';
|
import { isNoteBlock } from '@blocksuite/affine-block-surface';
|
||||||
import { ConnectorCWithArrowIcon } from '@blocksuite/affine-components/icons';
|
import { ConnectorCWithArrowIcon } from '@blocksuite/affine-components/icons';
|
||||||
import {
|
import {
|
||||||
@@ -12,6 +11,7 @@ import {
|
|||||||
import type {
|
import type {
|
||||||
AttachmentBlockModel,
|
AttachmentBlockModel,
|
||||||
BrushElementModel,
|
BrushElementModel,
|
||||||
|
BuiltInEmbedModel,
|
||||||
ConnectorElementModel,
|
ConnectorElementModel,
|
||||||
EdgelessTextBlockModel,
|
EdgelessTextBlockModel,
|
||||||
FrameBlockModel,
|
FrameBlockModel,
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import type { BuiltInEmbedBlockComponent } from '@blocksuite/affine-block-bookmark';
|
|
||||||
import { MenuContext } from '@blocksuite/affine-components/toolbar';
|
import { MenuContext } from '@blocksuite/affine-components/toolbar';
|
||||||
|
|
||||||
|
import type { BuiltInEmbedBlockComponent } from '../../utils';
|
||||||
|
|
||||||
export class EmbedCardToolbarContext extends MenuContext {
|
export class EmbedCardToolbarContext extends MenuContext {
|
||||||
override close = () => {
|
override close = () => {
|
||||||
this.abortController.abort();
|
this.abortController.abort();
|
||||||
|
|||||||
@@ -1,15 +1,13 @@
|
|||||||
import {
|
import {
|
||||||
type BuiltInEmbedBlockComponent,
|
EmbedLinkedDocBlockComponent,
|
||||||
type BuiltInEmbedModel,
|
EmbedSyncedDocBlockComponent,
|
||||||
isEmbedCardBlockComponent,
|
|
||||||
isInternalEmbedModel,
|
|
||||||
toggleEmbedCardCaptionEditModal,
|
|
||||||
toggleEmbedCardEditModal,
|
|
||||||
} from '@blocksuite/affine-block-bookmark';
|
|
||||||
import {
|
|
||||||
getDocContentWithMaxLength,
|
getDocContentWithMaxLength,
|
||||||
getEmbedCardIcons,
|
getEmbedCardIcons,
|
||||||
} from '@blocksuite/affine-block-embed';
|
} from '@blocksuite/affine-block-embed';
|
||||||
|
import {
|
||||||
|
toggleEmbedCardCaptionEditModal,
|
||||||
|
toggleEmbedCardEditModal,
|
||||||
|
} from '@blocksuite/affine-components/embed-card-modal';
|
||||||
import {
|
import {
|
||||||
CaptionIcon,
|
CaptionIcon,
|
||||||
CopyIcon,
|
CopyIcon,
|
||||||
@@ -19,7 +17,11 @@ import {
|
|||||||
PaletteIcon,
|
PaletteIcon,
|
||||||
SmallArrowDownIcon,
|
SmallArrowDownIcon,
|
||||||
} from '@blocksuite/affine-components/icons';
|
} 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 { isPeekable, peek } from '@blocksuite/affine-components/peek';
|
||||||
import { toast } from '@blocksuite/affine-components/toast';
|
import { toast } from '@blocksuite/affine-components/toast';
|
||||||
import {
|
import {
|
||||||
@@ -34,9 +36,11 @@ import {
|
|||||||
type AliasInfo,
|
type AliasInfo,
|
||||||
type BookmarkBlockModel,
|
type BookmarkBlockModel,
|
||||||
BookmarkStyles,
|
BookmarkStyles,
|
||||||
|
type BuiltInEmbedModel,
|
||||||
type EmbedCardStyle,
|
type EmbedCardStyle,
|
||||||
type EmbedGithubModel,
|
type EmbedGithubModel,
|
||||||
type EmbedLinkedDocModel,
|
type EmbedLinkedDocModel,
|
||||||
|
isInternalEmbedModel,
|
||||||
type RootBlockModel,
|
type RootBlockModel,
|
||||||
} from '@blocksuite/affine-model';
|
} from '@blocksuite/affine-model';
|
||||||
import {
|
import {
|
||||||
@@ -76,6 +80,10 @@ import {
|
|||||||
isEmbedSyncedDocBlock,
|
isEmbedSyncedDocBlock,
|
||||||
} from '../../edgeless/utils/query.js';
|
} from '../../edgeless/utils/query.js';
|
||||||
import type { RootBlockComponent } from '../../types.js';
|
import type { RootBlockComponent } from '../../types.js';
|
||||||
|
import {
|
||||||
|
type BuiltInEmbedBlockComponent,
|
||||||
|
isEmbedCardBlockComponent,
|
||||||
|
} from '../../utils/types';
|
||||||
import { BUILT_IN_GROUPS } from './config.js';
|
import { BUILT_IN_GROUPS } from './config.js';
|
||||||
import { EmbedCardToolbarContext } from './context.js';
|
import { EmbedCardToolbarContext } from './context.js';
|
||||||
import { embedCardToolbarStyle } from './styles.js';
|
import { embedCardToolbarStyle } from './styles.js';
|
||||||
@@ -127,7 +135,35 @@ export class EmbedCardToolbar extends WidgetComponent<
|
|||||||
|
|
||||||
this._hide();
|
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', {
|
track(this.std, model, this._viewType, 'OpenedAliasPopup', {
|
||||||
control: 'edit',
|
control: 'edit',
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import { addSiblingAttachmentBlocks } from '@blocksuite/affine-block-attachment';
|
import { addSiblingAttachmentBlocks } from '@blocksuite/affine-block-attachment';
|
||||||
import { toggleEmbedCardCreateModal } from '@blocksuite/affine-block-bookmark';
|
|
||||||
import { insertDatabaseBlockCommand } from '@blocksuite/affine-block-database';
|
import { insertDatabaseBlockCommand } from '@blocksuite/affine-block-database';
|
||||||
import { insertImagesCommand } from '@blocksuite/affine-block-image';
|
import { insertImagesCommand } from '@blocksuite/affine-block-image';
|
||||||
import { insertLatexBlockCommand } from '@blocksuite/affine-block-latex';
|
import { insertLatexBlockCommand } from '@blocksuite/affine-block-latex';
|
||||||
@@ -18,6 +17,7 @@ import {
|
|||||||
} from '@blocksuite/affine-block-paragraph';
|
} from '@blocksuite/affine-block-paragraph';
|
||||||
import { getSurfaceBlock } from '@blocksuite/affine-block-surface';
|
import { getSurfaceBlock } from '@blocksuite/affine-block-surface';
|
||||||
import { insertSurfaceRefBlockCommand } from '@blocksuite/affine-block-surface-ref';
|
import { insertSurfaceRefBlockCommand } from '@blocksuite/affine-block-surface-ref';
|
||||||
|
import { toggleEmbedCardCreateModal } from '@blocksuite/affine-components/embed-card-modal';
|
||||||
import {
|
import {
|
||||||
formatBlockCommand,
|
formatBlockCommand,
|
||||||
formatNativeCommand,
|
formatNativeCommand,
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import { addSiblingAttachmentBlocks } from '@blocksuite/affine-block-attachment';
|
import { addSiblingAttachmentBlocks } from '@blocksuite/affine-block-attachment';
|
||||||
import { toggleEmbedCardCreateModal } from '@blocksuite/affine-block-bookmark';
|
|
||||||
import type { DataViewBlockComponent } from '@blocksuite/affine-block-data-view';
|
import type { DataViewBlockComponent } from '@blocksuite/affine-block-data-view';
|
||||||
import { insertDatabaseBlockCommand } from '@blocksuite/affine-block-database';
|
import { insertDatabaseBlockCommand } from '@blocksuite/affine-block-database';
|
||||||
import {
|
import {
|
||||||
@@ -13,6 +12,7 @@ import { insertLatexBlockCommand } from '@blocksuite/affine-block-latex';
|
|||||||
import { getSurfaceBlock } from '@blocksuite/affine-block-surface';
|
import { getSurfaceBlock } from '@blocksuite/affine-block-surface';
|
||||||
import { insertSurfaceRefBlockCommand } from '@blocksuite/affine-block-surface-ref';
|
import { insertSurfaceRefBlockCommand } from '@blocksuite/affine-block-surface-ref';
|
||||||
import { insertTableBlockCommand } from '@blocksuite/affine-block-table';
|
import { insertTableBlockCommand } from '@blocksuite/affine-block-table';
|
||||||
|
import { toggleEmbedCardCreateModal } from '@blocksuite/affine-components/embed-card-modal';
|
||||||
import {
|
import {
|
||||||
ArrowDownBigIcon,
|
ArrowDownBigIcon,
|
||||||
ArrowUpBigIcon,
|
ArrowUpBigIcon,
|
||||||
|
|||||||
@@ -34,7 +34,6 @@ export const PackageList = [
|
|||||||
name: '@blocksuite/affine-block-bookmark',
|
name: '@blocksuite/affine-block-bookmark',
|
||||||
workspaceDependencies: [
|
workspaceDependencies: [
|
||||||
'blocksuite/affine/block-embed',
|
'blocksuite/affine/block-embed',
|
||||||
'blocksuite/affine/block-surface',
|
|
||||||
'blocksuite/affine/components',
|
'blocksuite/affine/components',
|
||||||
'blocksuite/affine/model',
|
'blocksuite/affine/model',
|
||||||
'blocksuite/affine/shared',
|
'blocksuite/affine/shared',
|
||||||
|
|||||||
@@ -3298,7 +3298,6 @@ __metadata:
|
|||||||
resolution: "@blocksuite/affine-block-bookmark@workspace:blocksuite/affine/block-bookmark"
|
resolution: "@blocksuite/affine-block-bookmark@workspace:blocksuite/affine/block-bookmark"
|
||||||
dependencies:
|
dependencies:
|
||||||
"@blocksuite/affine-block-embed": "workspace:*"
|
"@blocksuite/affine-block-embed": "workspace:*"
|
||||||
"@blocksuite/affine-block-surface": "workspace:*"
|
|
||||||
"@blocksuite/affine-components": "workspace:*"
|
"@blocksuite/affine-components": "workspace:*"
|
||||||
"@blocksuite/affine-model": "workspace:*"
|
"@blocksuite/affine-model": "workspace:*"
|
||||||
"@blocksuite/affine-shared": "workspace:*"
|
"@blocksuite/affine-shared": "workspace:*"
|
||||||
|
|||||||
Reference in New Issue
Block a user