fix(editor): embed iframe block idle status selected style (#11239)
Close [BS-2936](https://linear.app/affine-design/issue/BS-2936/占位去掉描边-grabber选中时颜色加深即可)
This commit is contained in:
@@ -19,7 +19,6 @@ export class EmbedIframeIdleCard extends WithDisposable(LitElement) {
|
|||||||
padding: 12px;
|
padding: 12px;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border: 1px solid var(--affine-border-color);
|
|
||||||
background-color: ${unsafeCSSVarV2('layer/background/secondary')};
|
background-color: ${unsafeCSSVarV2('layer/background/secondary')};
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
|
|||||||
@@ -17,7 +17,12 @@ import { matchModels } from '@blocksuite/affine-shared/utils';
|
|||||||
import { BlockSelection } from '@blocksuite/block-std';
|
import { BlockSelection } from '@blocksuite/block-std';
|
||||||
import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
|
import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
|
||||||
import { flip, offset, shift } from '@floating-ui/dom';
|
import { flip, offset, shift } from '@floating-ui/dom';
|
||||||
import { computed, type ReadonlySignal, signal } from '@preact/signals-core';
|
import {
|
||||||
|
computed,
|
||||||
|
effect,
|
||||||
|
type ReadonlySignal,
|
||||||
|
signal,
|
||||||
|
} from '@preact/signals-core';
|
||||||
import { html, nothing } from 'lit';
|
import { html, nothing } from 'lit';
|
||||||
import { query } from 'lit/decorators.js';
|
import { query } from 'lit/decorators.js';
|
||||||
import { type ClassInfo, classMap } from 'lit/directives/class-map.js';
|
import { type ClassInfo, classMap } from 'lit/directives/class-map.js';
|
||||||
@@ -244,7 +249,7 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra
|
|||||||
};
|
};
|
||||||
|
|
||||||
private readonly _selectBlock = () => {
|
private readonly _selectBlock = () => {
|
||||||
const selectionManager = this.host.selection;
|
const { selectionManager } = this;
|
||||||
const blockSelection = selectionManager.create(BlockSelection, {
|
const blockSelection = selectionManager.create(BlockSelection, {
|
||||||
blockId: this.blockId,
|
blockId: this.blockId,
|
||||||
});
|
});
|
||||||
@@ -256,11 +261,17 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra
|
|||||||
if (this.inSurface) {
|
if (this.inSurface) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// when the block is in idle status and the url is not set, clear the selection
|
||||||
|
// and show the link input popup
|
||||||
if (this.isIdle$.value && !this.model.props.url) {
|
if (this.isIdle$.value && !this.model.props.url) {
|
||||||
|
this.selectionManager.clear(['block']);
|
||||||
this.toggleLinkInputPopup();
|
this.toggleLinkInputPopup();
|
||||||
} else {
|
return;
|
||||||
this._selectBlock();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// otherwise, select the block
|
||||||
|
this._selectBlock();
|
||||||
};
|
};
|
||||||
|
|
||||||
private readonly _handleRetry = async () => {
|
private readonly _handleRetry = async () => {
|
||||||
@@ -328,6 +339,23 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra
|
|||||||
|
|
||||||
this.contentEditable = 'false';
|
this.contentEditable = 'false';
|
||||||
|
|
||||||
|
// update the selected style when the block is in the note
|
||||||
|
this.disposables.add(
|
||||||
|
effect(() => {
|
||||||
|
if (this.inSurface) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// when the block is in idle status, use the background style
|
||||||
|
// otherwise, use the border style
|
||||||
|
if (this.status$.value === 'idle') {
|
||||||
|
this.selectedStyle = SelectedStyle.Background;
|
||||||
|
} else {
|
||||||
|
this.selectedStyle = SelectedStyle.Border;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
if (!this.model.props.iframeUrl) {
|
if (!this.model.props.iframeUrl) {
|
||||||
this.doc.withoutTransact(() => {
|
this.doc.withoutTransact(() => {
|
||||||
this.refreshData().catch(console.error);
|
this.refreshData().catch(console.error);
|
||||||
@@ -415,6 +443,10 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra
|
|||||||
return this.doc.readonly;
|
return this.doc.readonly;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get selectionManager() {
|
||||||
|
return this.host.selection;
|
||||||
|
}
|
||||||
|
|
||||||
override accessor useCaptionEditor = true;
|
override accessor useCaptionEditor = true;
|
||||||
|
|
||||||
override accessor useZeroWidth = true;
|
override accessor useZeroWidth = true;
|
||||||
|
|||||||
Reference in New Issue
Block a user