fix: can not drag collapsed heading (#9272)

blocksuite/affine/block-paragraph/src/paragraph-drag-extension.ts

@@ -1,51 +0,0 @@
-import {
-  ParagraphBlockModel,
-  ParagraphBlockSchema,
-} from '@blocksuite/affine-model';
-import { DragHandleConfigExtension } from '@blocksuite/affine-shared/services';
-import {
-  calculateCollapsedSiblings,
-  captureEventTarget,
-  matchFlavours,
-} from '@blocksuite/affine-shared/utils';
-
-export const ParagraphDragHandleOption = DragHandleConfigExtension({
-  flavour: ParagraphBlockSchema.model.flavour,
-  onDragStart: ({ state, startDragging, anchorBlockId, editorHost }) => {
-    if (!anchorBlockId) return false;
-
-    const element = captureEventTarget(state.raw.target);
-    const dragByHandle = !!element?.closest('affine-drag-handle-widget');
-    if (!dragByHandle) return false;
-
-    const block = editorHost.doc.getBlock(anchorBlockId);
-    if (!block) return false;
-    const model = block.model;
-    if (
-      matchFlavours(model, ['affine:paragraph']) &&
-      model.type.startsWith('h') &&
-      model.collapsed
-    ) {
-      const collapsedSiblings = calculateCollapsedSiblings(model).flatMap(
-        sibling => editorHost.view.getBlock(sibling.id) ?? []
-      );
-      const modelElement = editorHost.view.getBlock(anchorBlockId);
-      if (!modelElement) return false;
-      startDragging([modelElement, ...collapsedSiblings], state);
-      return true;
-    }
-
-    return false;
-  },
-  onDragEnd: ({ draggingElements }) => {
-    draggingElements
-      .filter(el => matchFlavours(el.model, ['affine:paragraph']))
-      .forEach(el => {
-        const model = el.model;
-        if (!(model instanceof ParagraphBlockModel)) return;
-        model.collapsed = false;
-      });
-
-    return false;
-  },
-});

blocksuite/affine/block-paragraph/src/paragraph-spec.ts

@@ -8,7 +8,6 @@ import { literal } from 'lit/static-html.js';
 
 import { ParagraphBlockAdapterExtensions } from './adapters/extension.js';
 import { commands } from './commands/index.js';
-import { ParagraphDragHandleOption } from './paragraph-drag-extension.js';
 import {
   ParagraphKeymapExtension,
   ParagraphTextKeymapExtension,
@@ -22,6 +21,5 @@ export const ParagraphBlockSpec: ExtensionType[] = [
   BlockViewExtension('affine:paragraph', literal`affine-paragraph`),
   ParagraphTextKeymapExtension,
   ParagraphKeymapExtension,
-  ParagraphDragHandleOption,
   ParagraphBlockAdapterExtensions,
 ].flat();

blocksuite/blocks/src/root-block/widgets/drag-handle/watchers/drag-event-watcher.ts

@@ -1,3 +1,4 @@
+import { ParagraphBlockComponent } from '@blocksuite/affine-block-paragraph';
 import type { EmbedCardStyle, NoteBlockModel } from '@blocksuite/affine-model';
 import {
   EMBED_CARD_HEIGHT,
@@ -218,7 +219,27 @@ export class DragEventWatcher {
       }
     }
 
-    const blocks = this.widget.selectionHelper.selectedBlockComponents;
+    const collapsedBlock: BlockComponent[] = [];
+    const blocks = this.widget.selectionHelper.selectedBlockComponents.flatMap(
+      block => {
+        // filter out collapsed siblings
+        if (collapsedBlock.includes(block)) return [];
+
+        // if block is toggled heading, should select all siblings
+        if (
+          block instanceof ParagraphBlockComponent &&
+          block.model.type.startsWith('h') &&
+          block.model.collapsed
+        ) {
+          const collapsedSiblings = block.collapsedSiblings.flatMap(
+            sibling => this.widget.host.view.getBlock(sibling.id) ?? []
+          );
+          collapsedBlock.push(...collapsedSiblings);
+          return [block, ...collapsedSiblings];
+        }
+        return [block];
+      }
+    );
 
     // This could be skipped if we can ensure that all selected blocks are on the same level
     // Which means not selecting parent block and child block at the same time