refactor(editor): unify directories naming (#11516)

**Directory Structure Changes** - Renamed multiple block-related directories by removing the "block-" prefix: - `block-attachment` → `attachment` - `block-bookmark` → `bookmark` - `block-callout` → `callout` - `block-code` → `code` - `block-data-view` → `data-view` - `block-database` → `database` - `block-divider` → `divider` - `block-edgeless-text` → `edgeless-text` - `block-embed` → `embed`
2026-02-20 07:47:19 +08:00 · 2025-04-07 12:34:40 +00:00
parent e1bd2047c4
commit 1f45cc5dec
893 changed files with 439 additions and 460 deletions
--- a/blocksuite/affine/blocks/image/src/image-block.ts
+++ b/blocksuite/affine/blocks/image/src/image-block.ts
@@ -0,0 +1,178 @@
+import { CaptionedBlockComponent } from '@blocksuite/affine-components/caption';
+import { whenHover } from '@blocksuite/affine-components/hover';
+import { Peekable } from '@blocksuite/affine-components/peek';
+import type { ImageBlockModel } from '@blocksuite/affine-model';
+import { ToolbarRegistryIdentifier } from '@blocksuite/affine-shared/services';
+import { IS_MOBILE } from '@blocksuite/global/env';
+import { BlockSelection } from '@blocksuite/std';
+import { html } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { when } from 'lit/directives/when.js';
+
+import type { ImageBlockFallbackCard } from './components/image-block-fallback.js';
+import type { ImageBlockPageComponent } from './components/page-image-block.js';
+import {
+  copyImageBlob,
+  downloadImageBlob,
+  fetchImageBlob,
+  turnImageIntoCardView,
+} from './utils.js';
+
+@Peekable({
+  enableOn: () => !IS_MOBILE,
+})
+export class ImageBlockComponent extends CaptionedBlockComponent<ImageBlockModel> {
+  convertToCardView = () => {
+    turnImageIntoCardView(this).catch(console.error);
+  };
+
+  copy = () => {
+    copyImageBlob(this).catch(console.error);
+  };
+
+  download = () => {
+    downloadImageBlob(this).catch(console.error);
+  };
+
+  refreshData = () => {
+    this.retryCount = 0;
+    fetchImageBlob(this).catch(console.error);
+  };
+
+  get resizableImg() {
+    return this.pageImage?.resizeImg;
+  }
+
+  private _handleClick(event: MouseEvent) {
+    // the peek view need handle shift + click
+    if (event.defaultPrevented) return;
+
+    event.stopPropagation();
+    const selectionManager = this.host.selection;
+    const blockSelection = selectionManager.create(BlockSelection, {
+      blockId: this.blockId,
+    });
+    selectionManager.setGroup('note', [blockSelection]);
+  }
+
+  private _initHover() {
+    const { setReference, setFloating, dispose } = whenHover(
+      hovered => {
+        const message$ = this.std.get(ToolbarRegistryIdentifier).message$;
+        if (hovered) {
+          message$.value = {
+            flavour: this.model.flavour,
+            element: this,
+            setFloating,
+          };
+          return;
+        }
+
+        // Clears previous bindings
+        message$.value = null;
+        setFloating();
+      },
+      { enterDelay: 500 }
+    );
+    setReference(this.hoverableContainer);
+    this._disposables.add(dispose);
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+
+    this.refreshData();
+    this.contentEditable = 'false';
+    this._disposables.add(
+      this.model.propsUpdated.subscribe(({ key }) => {
+        if (key === 'sourceId') {
+          this.refreshData();
+        }
+      })
+    );
+  }
+
+  override disconnectedCallback() {
+    if (this.blobUrl) {
+      URL.revokeObjectURL(this.blobUrl);
+    }
+    super.disconnectedCallback();
+  }
+
+  override firstUpdated() {
+    // lazy bindings
+    this.disposables.addFromEvent(this, 'click', this._handleClick);
+    this._initHover();
+  }
+
+  override renderBlock() {
+    const containerStyleMap = styleMap({
+      position: 'relative',
+      width: '100%',
+    });
+
+    return html`
+      <div class="affine-image-container" style=${containerStyleMap}>
+        ${when(
+          this.loading || this.error,
+          () =>
+            html`<affine-image-fallback-card
+              .error=${this.error}
+              .loading=${this.loading}
+              .mode=${'page'}
+            ></affine-image-fallback-card>`,
+          () => html`<affine-page-image .block=${this}></affine-page-image>`
+        )}
+      </div>
+
+      ${Object.values(this.widgets)}
+    `;
+  }
+
+  override updated() {
+    this.fallbackCard?.requestUpdate();
+  }
+
+  @property({ attribute: false })
+  accessor blob: Blob | undefined = undefined;
+
+  @property({ attribute: false })
+  accessor blobUrl: string | undefined = undefined;
+
+  override accessor blockContainerStyles = { margin: '18px 0' };
+
+  @property({ attribute: false })
+  accessor downloading = false;
+
+  @property({ attribute: false })
+  accessor error = false;
+
+  @query('affine-image-fallback-card')
+  accessor fallbackCard: ImageBlockFallbackCard | null = null;
+
+  @state()
+  accessor lastSourceId!: string;
+
+  @property({ attribute: false })
+  accessor loading = false;
+
+  @query('affine-page-image')
+  private accessor pageImage: ImageBlockPageComponent | null = null;
+
+  @query('.affine-image-container')
+  accessor hoverableContainer!: HTMLDivElement;
+
+  @property({ attribute: false })
+  accessor retryCount = 0;
+
+  override accessor useCaptionEditor = true;
+
+  override accessor useZeroWidth = true;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'affine-image': ImageBlockComponent;
+  }
+}