fix(editor): convert note to linked doc from edgeless (#11828)

Closes: BS-3244

blocksuite/affine/blocks/root/src/edgeless/configs/toolbar/render-linked-doc.ts

@@ -1,6 +1,10 @@
 import { isFrameBlock } from '@blocksuite/affine-block-frame';
 import { getSurfaceBlock, isNoteBlock } from '@blocksuite/affine-block-surface';
-import type { FrameBlockModel, NoteBlockModel } from '@blocksuite/affine-model';
+import {
+  type FrameBlockModel,
+  type NoteBlockModel,
+  NoteDisplayMode,
+} from '@blocksuite/affine-model';
 import { replaceIdMiddleware } from '@blocksuite/affine-shared/adapters';
 import { DocModeProvider } from '@blocksuite/affine-shared/services';
 import { getBlockProps } from '@blocksuite/affine-shared/utils';
@@ -28,6 +32,7 @@ export function createLinkedDocFromNote(
     console.error('Failed to create linked doc from note');
     return;
   }
+  blockSnapshot.props.displayMode = NoteDisplayMode.DocAndEdgeless;
   const linkedDoc = _doc.getStore({ id: doc.id });
   linkedDoc.load(() => {
     const rootId = linkedDoc.addBlock('affine:page', {

tests/affine-local/e2e/blocksuite/edgeless/note.spec.ts

@@ -426,3 +426,42 @@ test.describe('note block rendering', () => {
     ).toHaveCSS('overflow-y', 'visible');
   });
 });
+
+test('should convert note block to linked doc when clicking turn into linked doc button', async ({
+  page,
+}) => {
+  await createEdgelessNoteBlock(page, [100, 100]);
+  await page.keyboard.type('Is this the real life?');
+  await page.keyboard.press('Enter');
+  await page.keyboard.type('Is this just fantasy?');
+
+  await page.keyboard.press('Escape');
+  await page.keyboard.press('Escape');
+  await page.keyboard.press('Escape');
+
+  const note = page.locator('affine-edgeless-note', {
+    hasText: 'Is this just fantasy?',
+  });
+  await note.click();
+  const toolbar = locateToolbar(page);
+  const moreBtn = toolbar.getByRole('button', { name: 'More' });
+  await moreBtn.click();
+  const turnIntoLinkedDocBtn = toolbar.getByRole('button', {
+    name: 'Turn into linked doc',
+  });
+  await turnIntoLinkedDocBtn.click();
+  await page.keyboard.type('Bohemian Rhapsody');
+
+  const confirmBtn = page.getByTestId('confirm-modal-confirm');
+  await confirmBtn.click();
+
+  const syncedDoc = page.locator('affine-embed-edgeless-synced-doc-block');
+  await expect(syncedDoc).toBeVisible();
+
+  const noteInSyncedDoc = syncedDoc.locator('affine-note');
+  await expect(noteInSyncedDoc).toBeVisible();
+
+  const paragraphs = noteInSyncedDoc.locator('affine-paragraph');
+  await expect(paragraphs.first()).toContainText('Is this the real life?');
+  await expect(paragraphs.last()).toContainText('Is this just fantasy?');
+});