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-09-07 01:09:54 +08:00 · 2025-04-07 12:34:40 +00:00
parent e1bd2047c4
commit 1f45cc5dec
893 changed files with 439 additions and 460 deletions
@@ -0,0 +1,82 @@
+import type {
+  AttachmentBlockModel,
+  BookmarkBlockModel,
+  EmbedFigmaModel,
+  EmbedGithubModel,
+  EmbedHtmlModel,
+  EmbedLinkedDocModel,
+  EmbedLoomModel,
+  EmbedSyncedDocModel,
+  EmbedYoutubeModel,
+  ImageBlockModel,
+} from '@blocksuite/affine-model';
+import { Bound } from '@blocksuite/global/gfx';
+import { WithDisposable } from '@blocksuite/global/lit';
+import { ShadowlessElement } from '@blocksuite/std';
+import type { BlockModel } from '@blocksuite/store';
+import { css, type TemplateResult } from 'lit';
+import { property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { html } from 'lit/static-html.js';
+
+export class SurfaceRefGenericBlockPortal extends WithDisposable(
+  ShadowlessElement
+) {
+  static override styles = css`
+    surface-ref-generic-block-portal {
+      position: relative;
+    }
+  `;
+
+  override firstUpdated() {
+    this.disposables.add(
+      this.model.propsUpdated.subscribe(() => this.requestUpdate())
+    );
+  }
+
+  override render() {
+    const { model, index } = this;
+    const bound = Bound.deserialize(model.xywh);
+    const style = {
+      position: 'absolute',
+      zIndex: `${index}`,
+      width: `${bound.w}px`,
+      height: `${bound.h}px`,
+      transform: `translate(${bound.x}px, ${bound.y}px)`,
+    };
+
+    return html`
+      <div
+        style=${styleMap(style)}
+        data-portal-reference-block-id="${model.id}"
+      >
+        ${this.renderModel(model)}
+      </div>
+    `;
+  }
+
+  @property({ attribute: false })
+  accessor index!: number;
+
+  @property({ attribute: false })
+  accessor model!:
+    | ImageBlockModel
+    | AttachmentBlockModel
+    | BookmarkBlockModel
+    | EmbedGithubModel
+    | EmbedYoutubeModel
+    | EmbedFigmaModel
+    | EmbedLinkedDocModel
+    | EmbedSyncedDocModel
+    | EmbedHtmlModel
+    | EmbedLoomModel;
+
+  @property({ attribute: false })
+  accessor renderModel!: (model: BlockModel) => TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'surface-ref-generic-block-portal': SurfaceRefGenericBlockPortal;
+  }
+}
@@ -0,0 +1,167 @@
+import type { CanvasRenderer } from '@blocksuite/affine-block-surface';
+import type { NoteBlockModel } from '@blocksuite/affine-model';
+import {
+  DefaultTheme,
+  NoteDisplayMode,
+  NoteShadow,
+} from '@blocksuite/affine-model';
+import {
+  EDGELESS_BLOCK_CHILD_BORDER_WIDTH,
+  EDGELESS_BLOCK_CHILD_PADDING,
+} from '@blocksuite/affine-shared/consts';
+import { ThemeProvider } from '@blocksuite/affine-shared/services';
+import { SpecProvider } from '@blocksuite/affine-shared/utils';
+import { deserializeXYWH } from '@blocksuite/global/gfx';
+import { WithDisposable } from '@blocksuite/global/lit';
+import {
+  BlockStdScope,
+  type EditorHost,
+  ShadowlessElement,
+} from '@blocksuite/std';
+import { RANGE_QUERY_EXCLUDE_ATTR } from '@blocksuite/std/inline';
+import { type BlockModel, type Query } from '@blocksuite/store';
+import { css, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { html } from 'lit/static-html.js';
+
+export class SurfaceRefNotePortal extends WithDisposable(ShadowlessElement) {
+  static override styles = css`
+    surface-ref-note-portal {
+      position: relative;
+    }
+  `;
+
+  ancestors = new Set<string>();
+
+  query: Query | null = null;
+
+  override connectedCallback() {
+    super.connectedCallback();
+
+    const ancestors = new Set<string>();
+    let parent: BlockModel | null = this.model;
+    while (parent) {
+      this.ancestors.add(parent.id);
+      parent = this.model.doc.getParent(parent.id);
+    }
+    const query: Query = {
+      mode: 'include',
+      match: Array.from(ancestors).map(id => ({
+        id,
+        viewType: 'display',
+      })),
+    };
+    this.query = query;
+
+    const doc = this.model.doc;
+    this._disposables.add(() => {
+      doc.doc.clearQuery(query, true);
+    });
+  }
+
+  override firstUpdated() {
+    this.disposables.add(
+      this.model.propsUpdated.subscribe(() => this.requestUpdate())
+    );
+  }
+
+  override render() {
+    const { model, index } = this;
+    const { displayMode, edgeless } = model.props;
+    if (!!displayMode && displayMode === NoteDisplayMode.DocOnly)
+      return nothing;
+
+    const backgroundColor = this.host.std
+      .get(ThemeProvider)
+      .generateColorProperty(
+        model.props.background,
+        DefaultTheme.noteBackgrounColor
+      );
+
+    const [modelX, modelY, modelW, modelH] = deserializeXYWH(model.xywh);
+    const style = {
+      zIndex: `${index}`,
+      width: modelW + 'px',
+      height:
+        edgeless.collapse && edgeless.collapsedHeight
+          ? edgeless.collapsedHeight + 'px'
+          : undefined,
+      transform: `translate(${modelX}px, ${modelY}px)`,
+      padding: `${EDGELESS_BLOCK_CHILD_PADDING}px`,
+      border: `${EDGELESS_BLOCK_CHILD_BORDER_WIDTH}px none var(--affine-black-10)`,
+      backgroundColor,
+      boxShadow: `var(${NoteShadow.Sticker})`,
+      position: 'absolute',
+      borderRadius: '0px',
+      boxSizing: 'border-box',
+      pointerEvents: 'none',
+      overflow: 'hidden',
+      transformOrigin: '0 0',
+      userSelect: 'none',
+    };
+
+    return html`
+      <div
+        class="surface-ref-note-portal"
+        style=${styleMap(style)}
+        data-model-height="${modelH}"
+        data-portal-reference-block-id="${model.id}"
+      >
+        ${this.renderPreview()}
+      </div>
+    `;
+  }
+
+  renderPreview() {
+    if (!this.query) {
+      console.error('Query is not set before rendering note preview');
+      return nothing;
+    }
+    const doc = this.model.doc.doc.getStore({
+      query: this.query,
+      readonly: true,
+    });
+    const previewSpec = SpecProvider._.getSpec('preview:page');
+    return new BlockStdScope({
+      store: doc,
+      extensions: previewSpec.value.slice(),
+    }).render();
+  }
+
+  override updated() {
+    setTimeout(() => {
+      const editableElements = Array.from<HTMLDivElement>(
+        this.querySelectorAll('[contenteditable]')
+      );
+      const blocks = Array.from(this.querySelectorAll(`[data-block-id]`));
+
+      editableElements.forEach(element => {
+        if (element.contentEditable === 'true')
+          element.contentEditable = 'false';
+      });
+
+      blocks.forEach(element => {
+        element.setAttribute(RANGE_QUERY_EXCLUDE_ATTR, 'true');
+      });
+    }, 500);
+  }
+
+  @property({ attribute: false })
+  accessor host!: EditorHost;
+
+  @property({ attribute: false })
+  accessor index!: number;
+
+  @property({ attribute: false })
+  accessor model!: NoteBlockModel;
+
+  @property({ attribute: false })
+  accessor renderer!: CanvasRenderer;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'surface-ref-note-portal': SurfaceRefNotePortal;
+  }
+}