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-08-28 12:19:27 +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,205 @@
+import {
+  DocModeExtension,
+  DocModeProvider,
+  EditorSettingExtension,
+  EditorSettingProvider,
+} from '@blocksuite/affine-shared/services';
+import { SpecProvider } from '@blocksuite/affine-shared/utils';
+import { BlockStdScope, BlockViewIdentifier } from '@blocksuite/std';
+import type {
+  BlockModel,
+  BlockViewType,
+  ExtensionType,
+  Query,
+  SliceSnapshot,
+} from '@blocksuite/store';
+import { signal } from '@preact/signals-core';
+import { literal } from 'lit/static-html.js';
+
+import { EdgelessDndPreviewElement } from '../components/edgeless-preview/preview.js';
+import type { AffineDragHandleWidget } from '../drag-handle.js';
+
+export class PreviewHelper {
+  private readonly _calculateQuery = (selectedIds: string[]): Query => {
+    const ids: Array<{ id: string; viewType: BlockViewType }> = selectedIds.map(
+      id => ({
+        id,
+        viewType: 'display',
+      })
+    );
+
+    // The ancestors of the selected blocks should be rendered as Bypass
+    selectedIds.forEach(block => {
+      let parent: string | null = block;
+      do {
+        if (!selectedIds.includes(parent)) {
+          ids.push({ viewType: 'bypass', id: parent });
+        }
+        parent = this.widget.doc.getParent(parent)?.id ?? null;
+      } while (parent && !ids.map(({ id }) => id).includes(parent));
+    });
+
+    // The children of the selected blocks should be rendered as Display
+    const addChildren = (id: string) => {
+      const model = this.widget.doc.getBlock(id)?.model;
+      if (!model) {
+        return;
+      }
+
+      const children = model.children ?? [];
+      children.forEach(child => {
+        ids.push({ viewType: 'display', id: child.id });
+        addChildren(child.id);
+      });
+    };
+    selectedIds.forEach(addChildren);
+
+    return {
+      match: ids,
+      mode: 'strict',
+    };
+  };
+
+  getPreviewStd = (blockIds: string[]) => {
+    const widget = this.widget;
+    const std = widget.std;
+    blockIds = blockIds.slice();
+
+    const docModeService = std.get(DocModeProvider);
+    const editorSetting = std.get(EditorSettingProvider).peek();
+    const query = this._calculateQuery(blockIds as string[]);
+    const store = widget.doc.doc.getStore({ query });
+    const previewSpec = SpecProvider._.getSpec('preview:page');
+    const settingSignal = signal({ ...editorSetting });
+    const extensions = [
+      DocModeExtension(docModeService),
+      EditorSettingExtension(settingSignal),
+      {
+        setup(di) {
+          di.override(
+            BlockViewIdentifier('affine:database'),
+            () => literal`affine-dnd-preview-database`
+          );
+        },
+      } as ExtensionType,
+      {
+        setup(di) {
+          di.override(BlockViewIdentifier('affine:image'), () => {
+            return (model: BlockModel) => {
+              const parent = model.doc.getParent(model.id);
+
+              if (parent?.flavour === 'affine:surface') {
+                return literal`affine-edgeless-placeholder-preview-image`;
+              }
+
+              return literal`affine-placeholder-preview-image`;
+            };
+          });
+        },
+      } as ExtensionType,
+    ];
+
+    previewSpec.extend(extensions);
+
+    settingSignal.value = {
+      ...settingSignal.value,
+      edgelessDisableScheduleUpdate: true,
+    };
+
+    const previewStd = new BlockStdScope({
+      store,
+      extensions: previewSpec.value,
+    });
+
+    let width: number = 500;
+    let height;
+
+    const noteBlock = this.widget.host.querySelector('affine-note');
+    width = noteBlock?.offsetWidth ?? noteBlock?.clientWidth ?? 500;
+
+    return {
+      previewStd,
+      width,
+      height,
+    };
+  };
+
+  private _extractBlockTypes(snapshot: SliceSnapshot) {
+    const blockTypes: {
+      type: string;
+    }[] = [];
+
+    snapshot.content.forEach(block => {
+      if (block.flavour === 'affine:surface') {
+        Object.values(
+          block.props.elements as Record<string, { id: string; type: string }>
+        ).forEach(elem => {
+          blockTypes.push({
+            type: elem.type,
+          });
+        });
+      } else {
+        blockTypes.push({
+          type: block.flavour,
+        });
+      }
+    });
+
+    return blockTypes;
+  }
+
+  getPreviewElement = (options: {
+    blockIds: string[];
+    snapshot: SliceSnapshot;
+    mode: 'block' | 'gfx';
+  }) => {
+    const { blockIds, snapshot, mode } = options;
+
+    if (mode === 'block') {
+      const { previewStd, width, height } = this.getPreviewStd(blockIds);
+      const previewTemplate = previewStd.render();
+
+      return {
+        width,
+        height,
+        element: previewTemplate,
+      };
+    } else {
+      const blockTypes = this._extractBlockTypes(snapshot);
+
+      const edgelessPreview = new EdgelessDndPreviewElement();
+      edgelessPreview.elementTypes = blockTypes;
+
+      return {
+        left: 12,
+        top: 12,
+        element: edgelessPreview,
+      };
+    }
+  };
+
+  renderDragPreview = (options: {
+    blockIds: string[];
+    snapshot: SliceSnapshot;
+    container: HTMLElement;
+    mode: 'block' | 'gfx';
+  }): { x: number; y: number } => {
+    const { container } = options;
+    const { width, height, element, left, top } =
+      this.getPreviewElement(options);
+
+    container.style.position = 'absolute';
+    container.style.left = left ? `${left}px` : '';
+    container.style.top = top ? `${top}px` : '';
+    container.style.width = width ? `${width}px` : '';
+    container.style.height = height ? `${height}px` : '';
+    container.append(element);
+
+    return {
+      x: left ?? 0,
+      y: top ?? 0,
+    };
+  };
+
+  constructor(readonly widget: AffineDragHandleWidget) {}
+}
@@ -0,0 +1,95 @@
+import { getCurrentNativeRange } from '@blocksuite/affine-shared/utils';
+import { Rect } from '@blocksuite/global/gfx';
+import type { BlockComponent } from '@blocksuite/std';
+
+import {
+  DRAG_HANDLE_CONTAINER_WIDTH,
+  DRAG_HOVER_RECT_PADDING,
+} from '../config.js';
+import type { AffineDragHandleWidget } from '../drag-handle.js';
+import {
+  containBlock,
+  getDragHandleLeftPadding,
+  includeTextSelection,
+} from '../utils.js';
+
+export class RectHelper {
+  private readonly _getHoveredBlocks = (): BlockComponent[] => {
+    if (!this.widget.isBlockDragHandleVisible || !this.widget.anchorBlockId)
+      return [];
+
+    const hoverBlock = this.widget.anchorBlockComponent.peek();
+    if (!hoverBlock) return [];
+
+    const selections = this.widget.selectionHelper.selectedBlocks;
+    let blocks: BlockComponent[] = [];
+
+    // When current selection is TextSelection, should cover all the blocks in native range
+    if (selections.length > 0 && includeTextSelection(selections)) {
+      const range = getCurrentNativeRange();
+      if (!range) return [];
+      const rangeManager = this.widget.std.range;
+      if (!rangeManager) return [];
+      blocks = rangeManager.getSelectedBlockComponentsByRange(range, {
+        match: el => el.model.role === 'content',
+        mode: 'highest',
+      });
+    } else {
+      blocks = this.widget.selectionHelper.selectedBlockComponents;
+    }
+
+    if (
+      containBlock(
+        blocks.map(block => block.blockId),
+        this.widget.anchorBlockId.peek()!
+      )
+    ) {
+      return blocks;
+    }
+
+    return [hoverBlock];
+  };
+
+  getDraggingAreaRect = (): Rect | null => {
+    const block = this.widget.anchorBlockComponent.value;
+    if (!block) return null;
+
+    // When hover block is in selected blocks, should show hover rect on the selected blocks
+    // Top: the top of the first selected block
+    // Left: the left of the first selected block
+    // Right: the largest right of the selected blocks
+    // Bottom: the bottom of the last selected block
+    let { left, top, right, bottom } = block.getBoundingClientRect();
+
+    const blocks = this._getHoveredBlocks();
+
+    blocks.forEach(block => {
+      left = Math.min(left, block.getBoundingClientRect().left);
+      top = Math.min(top, block.getBoundingClientRect().top);
+      right = Math.max(right, block.getBoundingClientRect().right);
+      bottom = Math.max(bottom, block.getBoundingClientRect().bottom);
+    });
+
+    const offsetLeft = getDragHandleLeftPadding(blocks);
+
+    const offsetParentRect =
+      this.widget.dragHandleContainerOffsetParent.getBoundingClientRect();
+    if (!offsetParentRect) return null;
+
+    left -= offsetParentRect.left;
+    right -= offsetParentRect.left;
+    top -= offsetParentRect.top;
+    bottom -= offsetParentRect.top;
+
+    const scaleInNote = this.widget.scaleInNote.value;
+    // Add padding to hover rect
+    left -= (DRAG_HANDLE_CONTAINER_WIDTH + offsetLeft) * scaleInNote;
+    top -= DRAG_HOVER_RECT_PADDING * scaleInNote;
+    right += DRAG_HOVER_RECT_PADDING * scaleInNote;
+    bottom += DRAG_HOVER_RECT_PADDING * scaleInNote;
+
+    return new Rect(left, top, right, bottom);
+  };
+
+  constructor(readonly widget: AffineDragHandleWidget) {}
+}
@@ -0,0 +1,67 @@
+import { findNoteBlockModel } from '@blocksuite/affine-shared/utils';
+import {
+  type BlockComponent,
+  BlockSelection,
+  SurfaceSelection,
+  TextSelection,
+} from '@blocksuite/std';
+
+import type { AffineDragHandleWidget } from '../drag-handle.js';
+
+export class SelectionHelper {
+  /** Check if given block component is selected */
+  isBlockSelected = (block?: BlockComponent) => {
+    if (!block) return false;
+    return this.selectedBlocks.some(
+      selection => selection.blockId === block.model.id
+    );
+  };
+
+  setSelectedBlocks = (blocks: BlockComponent[], noteId?: string) => {
+    const { selection } = this;
+    const selections = blocks.map(block =>
+      selection.create(BlockSelection, {
+        blockId: block.blockId,
+      })
+    );
+
+    // When current page is edgeless page
+    // We need to remain surface selection and set editing as true
+    if (this.widget.mode === 'edgeless') {
+      const surfaceElementId = noteId
+        ? noteId
+        : findNoteBlockModel(blocks[0].model)?.id;
+      if (!surfaceElementId) return;
+      const surfaceSelection = selection.create(
+        SurfaceSelection,
+        blocks[0]!.blockId,
+        [surfaceElementId],
+        true
+      );
+
+      selections.push(surfaceSelection);
+    }
+
+    selection.set(selections);
+  };
+
+  get selectedBlockComponents() {
+    return this.selectedBlocks
+      .map(block => this.widget.std.view.getBlock(block.blockId))
+      .filter((block): block is BlockComponent => !!block);
+  }
+
+  get selectedBlocks() {
+    const selection = this.selection;
+
+    return selection.find(TextSelection)
+      ? selection.filter(TextSelection)
+      : selection.filter(BlockSelection);
+  }
+
+  get selection() {
+    return this.widget.std.selection;
+  }
+
+  constructor(readonly widget: AffineDragHandleWidget) {}
+}