From 081974e82453914d6874e15701dc44a370cb32e5 Mon Sep 17 00:00:00 2001
From: L-Sun <zover.v@gmail.com>
Date: Tue, 29 Apr 2025 10:36:54 +0000
Subject: [PATCH] fix(editor): should keep order of note after sliced by
 scissor (#12034)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Close [BS-3175](https://linear.app/affine-design/issue/BS-3175/剪刀剪出来的段落，排序应该紧跟原段落，而不是排到所有段落最后)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **Bug Fixes**
  - Improved the accuracy of new note insertion, ensuring new notes are added immediately after the anchor note in the correct order.

- **Tests**
  - Enhanced end-to-end tests for note slicing, including more interactions and assertions to verify correct note order and display modes after slicing.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../edgeless/components/note-slicer/index.ts  | 10 +++++--
 .../blocksuite/outline/outline-panel.spec.ts  | 29 ++++++++++++++-----
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/blocksuite/affine/blocks/root/src/edgeless/components/note-slicer/index.ts b/blocksuite/affine/blocks/root/src/edgeless/components/note-slicer/index.ts
index 89d2c18a9..8e99501e0 100644
--- a/blocksuite/affine/blocks/root/src/edgeless/components/note-slicer/index.ts
+++ b/blocksuite/affine/blocks/root/src/edgeless/components/note-slicer/index.ts
@@ -155,11 +155,14 @@ export class NoteSlicer extends WidgetComponent<RootBlockModel> {
     const doc = this.doc;
 
     const {
-      index: originIndex,
+      index: originalIndex,
       xywh,
       background,
       displayMode,
     } = this._anchorNote.props;
+    const originalNoteIndex = this._anchorNote.parent?.children.findIndex(
+      child => child === this._anchorNote
+    );
     const { children } = this._anchorNote;
     const {
       collapse: _,
@@ -180,10 +183,11 @@ export class NoteSlicer extends WidgetComponent<RootBlockModel> {
         background,
         displayMode,
         xywh: serializeXYWH(x, newY + NEW_NOTE_GAP, width, DEFAULT_NOTE_HEIGHT),
-        index: originIndex + 1,
+        index: originalIndex + 1,
         edgeless: restOfEdgeless,
       },
-      doc.root?.id
+      doc.root?.id,
+      originalNoteIndex ? originalNoteIndex + 1 : undefined
     );
 
     doc.moveBlocks(resetBlocks, doc.getModelById(newNoteId) as NoteBlockModel);
diff --git a/tests/affine-local/e2e/blocksuite/outline/outline-panel.spec.ts b/tests/affine-local/e2e/blocksuite/outline/outline-panel.spec.ts
index 13c38ca64..4ddeb5062 100644
--- a/tests/affine-local/e2e/blocksuite/outline/outline-panel.spec.ts
+++ b/tests/affine-local/e2e/blocksuite/outline/outline-panel.spec.ts
@@ -524,20 +524,27 @@ test.describe('advanced visibility control', () => {
     await type(page, 'hello');
     await pressEnter(page);
     await type(page, 'world');
+    await pressEscape(page, 3);
+    await createEdgelessNoteBlock(page, [200, 400]);
 
     const toc = await openTocPanel(page);
 
     const bothCard = locateCards(toc, 'both');
-    const edgelessCard = locateCards(toc, 'edgeless');
+    const edgelessCards = locateCards(toc, 'edgeless');
 
     await expect(bothCard).toHaveCount(1);
-    await expect(edgelessCard).toHaveCount(1);
+    await expect(edgelessCards).toHaveCount(2);
 
-    await edgelessCard.hover();
-    await edgelessCard.getByTestId('display-mode-button').click();
-    await edgelessCard.locator('note-display-mode-panel .item.both').click();
+    while ((await edgelessCards.count()) > 0) {
+      await edgelessCards.first().hover();
+      await edgelessCards.first().getByTestId('display-mode-button').click();
+      await edgelessCards
+        .first()
+        .locator('note-display-mode-panel .item.both')
+        .click();
+    }
 
-    await expect(bothCard).toHaveCount(2);
+    await expect(bothCard).toHaveCount(3);
 
     await clickView(page, [200, 100]);
     const toolbar = locateToolbar(page);
@@ -545,6 +552,14 @@ test.describe('advanced visibility control', () => {
     await expect(page.locator('.note-slicer-button')).toBeVisible();
     await page.locator('.note-slicer-button').click();
 
-    await expect(bothCard).toHaveCount(3);
+    await expect(bothCard).toHaveCount(4);
+    await expect(
+      bothCard.nth(1),
+      'the sliced note card should keep the order in its parent'
+    ).toContainText('hello');
+    await expect(
+      bothCard.nth(2),
+      'the sliced note card should keep the order in its parent'
+    ).toContainText('world');
   });
 });