-
- ${modelNotFound
- ? DeleteIcon({ width: '16px', height: '16px' })
- : matchedType.icon({ width: '16px', height: '16px' })}
-
- ${modelNotFound
- ? `This ${matchedType.name} not available`
- : `${title}`}
-
-
-
-
- ${modelNotFound
- ? `The ${matchedType.name.toLowerCase()} is deleted or not in this doc.`
- : `The ${matchedType.name.toLowerCase()} is inserted but cannot display in edgeless mode. Switch to page mode to view the block.`}
-
-
-
- ${modelNotFound
- ? html`
- ${SurfaceRefNotFoundBackground}
-
`
- : nothing}
- `;
- }
+ @state()
+ accessor _focused = false;
override renderBlock() {
return html`
- ${this._renderRefContent(this._referenceModel)}
+
`;
}
}
diff --git a/blocksuite/affine/blocks/block-surface-ref/src/surface-ref-block.ts b/blocksuite/affine/blocks/block-surface-ref/src/surface-ref-block.ts
index cf1fbe50fd..989dcc88f0 100644
--- a/blocksuite/affine/blocks/block-surface-ref/src/surface-ref-block.ts
+++ b/blocksuite/affine/blocks/block-surface-ref/src/surface-ref-block.ts
@@ -32,7 +32,6 @@ import {
type SerializedXYWH,
} from '@blocksuite/global/gfx';
import { assertType } from '@blocksuite/global/utils';
-import { DeleteIcon } from '@blocksuite/icons/lit';
import {
BlockComponent,
BlockSelection,
@@ -55,20 +54,9 @@ import { classMap } from 'lit/directives/class-map.js';
import { guard } from 'lit/directives/guard.js';
import { styleMap } from 'lit/directives/style-map.js';
-import { noContentPlaceholder } from './utils.js';
-
-const NO_CONTENT_TITLE = {
- 'affine:frame': 'Frame',
- group: 'Group',
- DEFAULT: 'Content',
-} as Record;
-
-const NO_CONTENT_REASON = {
- group: 'This content was ungrouped or deleted on edgeless mode',
- DEFAULT: 'This content was deleted on edgeless mode',
-} as Record;
-
-@Peekable()
+@Peekable({
+ enableOn: (block: SurfaceRefBlockComponent) => !!block.referenceModel,
+})
export class SurfaceRefBlockComponent extends BlockComponent {
static override styles = css`
affine-surface-ref {
@@ -101,70 +89,6 @@ export class SurfaceRefBlockComponent extends BlockComponent .icon > svg {
- color: var(--affine-icon-color);
- width: 16px;
- height: 16px;
- display: block;
- }
-
- .placeholder-reason {
- margin: 72px auto 0;
- padding: 10px;
-
- text-align: center;
- font-size: 12px;
- font-family: var(--affine-font-family);
- line-height: 20px;
-
- color: var(--affine-warning-color);
- background-color: var(--affine-background-error-color);
- }
-
.ref-content {
position: relative;
background-color: var(--affine-background-primary-color);
@@ -206,10 +130,6 @@ export class SurfaceRefBlockComponent extends BlockComponent {
return [this.selection.create(BlockSelection, { blockId: this.blockId })];
@@ -474,27 +394,6 @@ export class SurfaceRefBlockComponent extends BlockComponent`;
}
- private _renderRefPlaceholder(model: SurfaceRefBlockModel) {
- return html`
-
${noContentPlaceholder}
-
- No Such
- ${NO_CONTENT_TITLE[model.props.refFlavour ?? 'DEFAULT'] ??
- NO_CONTENT_TITLE.DEFAULT}
-
-
-
- ${DeleteIcon()} Delete this block
-
-
-
- ${NO_CONTENT_REASON[model.props.refFlavour ?? 'DEFAULT'] ??
- NO_CONTENT_REASON.DEFAULT}
-
-
`
: this._renderRefContent(_referencedModel);
const edgelessTheme = this.std.get(ThemeProvider).edgeless$.value;
diff --git a/blocksuite/affine/blocks/block-surface-ref/src/utils.ts b/blocksuite/affine/blocks/block-surface-ref/src/utils.ts
index 7544b18993..f63baa8aec 100644
--- a/blocksuite/affine/blocks/block-surface-ref/src/utils.ts
+++ b/blocksuite/affine/blocks/block-surface-ref/src/utils.ts
@@ -1,11 +1,23 @@
+import { isFrameBlock } from '@blocksuite/affine-block-frame';
import type { SurfaceBlockComponent } from '@blocksuite/affine-block-surface';
import { ExportManager } from '@blocksuite/affine-block-surface';
import type { SurfaceRefBlockComponent } from '@blocksuite/affine-block-surface-ref';
+import {
+ GroupElementModel,
+ MindmapElementModel,
+ ShapeElementModel,
+} from '@blocksuite/affine-model';
import { BlockSuiteError } from '@blocksuite/global/exceptions';
import { Bound } from '@blocksuite/global/gfx';
import { assertType } from '@blocksuite/global/utils';
-import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
-import { html } from 'lit';
+import {
+ EdgelessIcon,
+ FrameIcon,
+ GroupIcon,
+ MindmapIcon,
+} from '@blocksuite/icons/lit';
+import { GfxControllerIdentifier, type GfxModel } from '@blocksuite/std/gfx';
+import { html, type TemplateResult } from 'lit';
export const noContentPlaceholder = html`
{
await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
};
+
+export const TYPE_ICON_MAP: {
+ [key: string]: {
+ name: string;
+ icon: TemplateResult;
+ };
+} = {
+ 'affine:frame': {
+ name: 'Frame',
+ icon: FrameIcon(),
+ },
+ group: {
+ name: 'Group',
+ icon: GroupIcon(),
+ },
+ mindmap: {
+ name: 'Mind map',
+ icon: MindmapIcon(),
+ },
+ edgeless: {
+ name: 'Edgeless content',
+ icon: EdgelessIcon(),
+ },
+};
+
+export const getReferenceModelTitle = (model: GfxModel) => {
+ if (model instanceof GroupElementModel) {
+ return model.title.toString();
+ }
+ if (isFrameBlock(model)) {
+ return model.props.title.toString();
+ }
+ if (model instanceof MindmapElementModel) {
+ const rootElement = model.tree.element;
+ if (rootElement instanceof ShapeElementModel) {
+ return rootElement.text?.toString() ?? '';
+ }
+ }
+ return null;
+};