snapshot of https://github.com/toeverything/AFFiNE.git (canary, 2026-09-16; blobs > 131072B omitted)

tests/blocksuite/e2e/embed-synced-doc/edgeless.spec.ts

@@ -0,0 +1,275 @@
+import type { AffineReference } from '@blocksuite/affine/inlines/reference';
+import type { EmbedSyncedDocBlockProps } from '@blocksuite/affine/model';
+import { expect, type Page } from '@playwright/test';
+
+import { clickView } from '../utils/actions/click.js';
+import {
+  createNote,
+  createShapeElement,
+  getAllSortedIds,
+  getIds,
+  getSelectedBound,
+  getSelectedIds,
+  isIntersected,
+  switchEditorMode,
+} from '../utils/actions/edgeless';
+import { pressBackspace, pressEscape } from '../utils/actions/keyboard.js';
+import { enterPlaygroundRoom, waitNextFrame } from '../utils/actions/misc';
+import { test } from '../utils/playwright';
+import { initEmbedSyncedDocState } from './utils';
+
+test.describe('Embed synced doc in edgeless mode', () => {
+  test.beforeEach(async ({ page }) => {
+    await enterPlaygroundRoom(page);
+  });
+
+  test.fixme('drag embed synced doc to whiteboard should fit in height', async ({
+    page,
+  }) => {
+    await initEmbedSyncedDocState(page, [
+      { title: 'Root Doc', content: 'hello root doc' },
+      { title: 'Page 1', content: 'hello page 1' },
+    ]);
+
+    await switchEditorMode(page);
+
+    // Double click on note to enter edit status
+    const noteBlock = page.locator('affine-edgeless-note');
+    await noteBlock.dblclick();
+
+    // Drag the embed synced doc to whiteboard
+    const embedSyncedBlockInNote = page.locator(
+      'affine-embed-synced-doc-block'
+    );
+    const embedSyncedBoxInNote = await embedSyncedBlockInNote.boundingBox();
+    if (!embedSyncedBoxInNote) {
+      throw new Error('embedSyncedBoxInNote is not found');
+    }
+    const height = embedSyncedBoxInNote.height;
+    await page.mouse.move(
+      embedSyncedBoxInNote.x - 10,
+      embedSyncedBoxInNote.y - 100
+    );
+    await page.mouse.move(
+      embedSyncedBoxInNote.x - 10,
+      embedSyncedBoxInNote.y + 10
+    );
+    await waitNextFrame(page);
+    await page.mouse.down();
+    await page.mouse.move(100, 200, { steps: 30 });
+    await page.mouse.up();
+
+    // Check the height of the embed synced doc portal, it should be the same as the embed synced doc in note
+    const EmbedSyncedDocBlockInCanvas = page.locator(
+      'affine-embed-edgeless-synced-doc-block'
+    );
+    const EmbedSyncedDocBlockBoxInCanvas =
+      await EmbedSyncedDocBlockInCanvas.boundingBox();
+    const border = 1;
+    if (!EmbedSyncedDocBlockBoxInCanvas) {
+      throw new Error('EmbedSyncedDocBlockBoxInCanvas is not found');
+    }
+    expect(EmbedSyncedDocBlockBoxInCanvas.height).toBeCloseTo(
+      height + 2 * border,
+      1
+    );
+  });
+
+  test('new edgeless embed synced doc should fit in height', async ({
+    page,
+  }) => {
+    const [_, embedDocId] = await initEmbedSyncedDocState(page, [
+      { title: 'Root Doc', content: 'hello root doc' },
+      { title: 'Page 1', content: '1\n2\n3\n4\n5\n6\n7' },
+    ]);
+    await switchEditorMode(page);
+
+    const paragraphHeight = (
+      await page
+        .locator('affine-embed-synced-doc-block affine-paragraph')
+        .boundingBox()
+    )?.height;
+    if (!paragraphHeight) {
+      test.fail();
+      return;
+    }
+
+    const createEmbedDocWithHeight = async (height: number) => {
+      await page.evaluate(
+        ({ embedDocId, height }) => {
+          const std = window.editor.std;
+          const surface = std.store.getModelsByFlavour('affine:surface')[0];
+          std.store.addBlock(
+            'affine:embed-synced-doc',
+            {
+              pageId: embedDocId,
+              xywh: `[0,100,370,${height}]`,
+            } satisfies Partial<EmbedSyncedDocBlockProps>,
+            surface.id
+          );
+        },
+        { embedDocId, height }
+      );
+      await waitNextFrame(page);
+    };
+
+    const embedSyncedBlockInNote = page.locator(
+      'affine-embed-edgeless-synced-doc-block'
+    );
+
+    {
+      const initHeight = paragraphHeight - 50;
+      await createEmbedDocWithHeight(initHeight);
+      const embedSyncedBoxInNote = await embedSyncedBlockInNote.boundingBox();
+      expect(embedSyncedBoxInNote?.height).toBeGreaterThan(initHeight);
+    }
+
+    await embedSyncedBlockInNote.click();
+    await pressBackspace(page);
+
+    {
+      const initHeight = paragraphHeight + 50;
+      await createEmbedDocWithHeight(initHeight);
+      const embedSyncedBoxInNote = await embedSyncedBlockInNote.boundingBox();
+      expect(embedSyncedBoxInNote?.height).toBeLessThan(initHeight);
+    }
+  });
+
+  test.describe('edgeless element toolbar', () => {
+    test.beforeEach(async ({ page }) => {
+      await initEmbedSyncedDocState(page, [
+        { title: 'Root Doc', content: 'hello root doc' },
+        { title: 'Page 1', content: 'hello page 1', inEdgeless: true },
+      ]);
+
+      await switchEditorMode(page);
+
+      const edgelessEmbedSyncedBlock = page.locator(
+        'affine-embed-edgeless-synced-doc-block'
+      );
+      await edgelessEmbedSyncedBlock.click();
+    });
+
+    const getDocIds = async (page: Page) => {
+      return page.evaluate(() => {
+        return [...window.collection.docs.keys()];
+      });
+    };
+
+    const locateToolbar = (page: Page) => {
+      return page.locator(
+        // TODO(@L-Sun): simplify this selector after that toolbar widget are disabled in preview rendering is ready
+        'affine-edgeless-root > .widgets-container affine-toolbar-widget editor-toolbar'
+      );
+    };
+
+    test('should insert embed-synced-doc into page when click "Insert into page" button', async ({
+      page,
+    }) => {
+      const embedSyncedBlock = page.locator('affine-embed-synced-doc-block');
+      const edgelessEmbedSyncedBlock = page.locator(
+        'affine-embed-edgeless-synced-doc-block'
+      );
+
+      const toolbar = locateToolbar(page);
+      const insertButton = toolbar.getByLabel('Insert to page');
+      await insertButton.click();
+
+      await expect(
+        edgelessEmbedSyncedBlock,
+        'the edgeless embed synced doc should be remained after click insert button'
+      ).toBeVisible();
+
+      await switchEditorMode(page);
+      await expect(embedSyncedBlock).toBeVisible();
+    });
+
+    test('should render a reference node and all content of embed-synced-doc after click "Duplicate as note" button', async ({
+      page,
+    }) => {
+      // switch doc
+      const switchDoc = async () =>
+        page.evaluate(() => {
+          for (const [id, doc] of window.collection.docs.entries()) {
+            if (id !== window.doc.id) {
+              window.editor.doc = doc.getStore();
+              window.doc = window.editor.doc;
+              break;
+            }
+          }
+        });
+      await switchDoc();
+
+      const toolbar = locateToolbar(page);
+
+      await createNote(page, [0, 100, 100, 800], 'hello note');
+      await pressEscape(page, 3);
+      await clickView(page, [400, 150]);
+      await toolbar.getByLabel('Display in Page').click();
+
+      await switchDoc();
+
+      const edgelessEmbedSyncedBlock = page.locator(
+        'affine-embed-edgeless-synced-doc-block'
+      );
+      await edgelessEmbedSyncedBlock.click();
+      await toolbar.getByLabel('Duplicate as note').click();
+
+      const edgelessNotes = page.locator('affine-edgeless-note');
+      await expect(edgelessNotes).toHaveCount(2);
+      await expect(edgelessNotes.last()).toBeVisible();
+
+      const blocks = edgelessNotes.last().locator('[data-block-id]');
+      await expect(blocks).toHaveCount(3);
+      const reference = blocks.nth(0).locator('affine-reference');
+      const paragraph1 = blocks.nth(1).locator('[data-v-text="true"]');
+      const paragraph2 = blocks.nth(2).locator('[data-v-text="true"]');
+      const refInfo = await reference.evaluate((reference: AffineReference) => {
+        return reference.delta.attributes?.reference;
+      });
+
+      expect(refInfo).toEqual({
+        type: 'LinkedPage',
+        pageId: (await getDocIds(page))[1],
+      });
+      await expect(paragraph1).toHaveText('hello page 1');
+      await expect(paragraph2).toHaveText('hello note');
+    });
+
+    test('should be selected and not overlay with the embed-synced-doc after duplicating as note', async ({
+      page,
+    }) => {
+      const prevIds = await getIds(page);
+
+      const embedDocBound = await getSelectedBound(page);
+
+      const toolbar = locateToolbar(page);
+      await toolbar.getByLabel('Duplicate as note').click();
+
+      const edgelessNotes = page.locator('affine-edgeless-note');
+      await expect(edgelessNotes).toHaveCount(2);
+      expect(await getSelectedIds(page)).toHaveLength(1);
+      expect(await getSelectedIds(page)).not.toContain(prevIds);
+      await expect(edgelessNotes.last()).toBeVisible();
+
+      const noteBound = await getSelectedBound(page);
+      expect(isIntersected(embedDocBound, noteBound)).toBe(false);
+    });
+
+    test('edgeless note duplicated from embed-synced-doc should be above other elements', async ({
+      page,
+    }) => {
+      await createShapeElement(page, [0, 0], [100, 100]);
+      await page.locator('affine-embed-edgeless-synced-doc-block').click();
+      const toolbar = locateToolbar(page);
+      await toolbar.getByLabel('Duplicate as note').click();
+
+      const edgelessNotes = page.locator('affine-edgeless-note');
+      await expect(edgelessNotes).toHaveCount(2);
+      const duplicatedNoteId = (await getSelectedIds(page))[0];
+      const sortedIds = await getAllSortedIds(page);
+      //
+      expect(sortedIds[sortedIds.length - 1]).toBe(duplicatedNoteId);
+    });
+  });
+});

tests/blocksuite/e2e/embed-synced-doc/render.spec.ts

@@ -0,0 +1,83 @@
+import type { DatabaseBlockModel } from '@blocksuite/affine/model';
+import { expect } from '@playwright/test';
+
+import { enterPlaygroundRoom } from '../utils/actions';
+import { test } from '../utils/playwright';
+import { initEmbedSyncedDocState } from './utils';
+
+test.describe('embed-synced-doc render', () => {
+  test.beforeEach(async ({ page }) => {
+    await enterPlaygroundRoom(page);
+  });
+
+  test('nested embed synced doc should be rendered as card when depth >=1', async ({
+    page,
+  }) => {
+    await initEmbedSyncedDocState(
+      page,
+      [
+        { title: 'Root', content: 'Hello from Root' },
+        { title: 'Doc 2', content: 'Hello from Doc 2' },
+        { title: 'Doc 3', content: 'Hello from Doc 3' },
+      ],
+      { chain: true }
+    );
+
+    expect(await page.locator('affine-embed-synced-doc-block').count()).toBe(2);
+    expect(await page.locator('affine-paragraph').count()).toBe(2);
+    expect(await page.locator('affine-embed-synced-doc-card').count()).toBe(1);
+    expect(await page.locator('editor-host').count()).toBe(2);
+  });
+
+  test('synced doc should be readonly', async ({ page }) => {
+    const [_, embedDocId] = await initEmbedSyncedDocState(page, [
+      { title: 'Root', content: 'Hello from Root' },
+      { title: 'Doc 2', content: 'Hello from Doc 2' },
+    ]);
+
+    const locator = page.locator('affine-embed-synced-doc-block');
+    await expect(locator).toBeVisible();
+    await locator.click();
+
+    const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
+    const openMenu = toolbar.getByRole('button', { name: 'Open doc' });
+    await openMenu.click();
+
+    const button = toolbar.getByRole('button', { name: 'Open this doc' });
+    await button.click();
+
+    await page.evaluate(async embedDocId => {
+      const { collection } = window;
+      const doc2 = collection.getDoc(embedDocId)!.getStore();
+      const [noteBlock] = doc2!.getBlocksByFlavour('affine:note');
+      const noteId = noteBlock.id;
+
+      const databaseId = doc2.addBlock(
+        'affine:database',
+        {
+          title: new window.$blocksuite.store.Text('Database 1'),
+        },
+        noteId
+      );
+      const model = doc2.getModelById(databaseId) as DatabaseBlockModel;
+      const datasource =
+        new window.$blocksuite.blocks.database.DatabaseBlockDataSource(model);
+      datasource.viewManager.viewAdd('table');
+    }, embedDocId);
+
+    // go back to previous doc
+    await page.evaluate(() => {
+      const { collection, editor } = window;
+      editor.doc = collection.getDoc('doc:home')!.getStore();
+    });
+
+    const databaseFirstCell = page.locator(
+      '.affine-database-column-header.database-row'
+    );
+    await databaseFirstCell.click({ force: true });
+    const selectedCount = await page
+      .locator('.affine-embed-synced-doc-container.selected')
+      .count();
+    expect(selectedCount).toBe(1);
+  });
+});

tests/blocksuite/e2e/embed-synced-doc/toolbar.spec.ts

@@ -0,0 +1,73 @@
+import { expect } from '@playwright/test';
+
+import {
+  enterPlaygroundRoom,
+  focusRichText,
+  initEmptyParagraphState,
+  waitNextFrame,
+} from '../utils/actions';
+import { getLinkedDocPopover } from '../utils/actions/linked-doc';
+import { test } from '../utils/playwright';
+import { initEmbedSyncedDocState } from './utils';
+
+test.describe('embed-synced-doc toolbar', () => {
+  test.beforeEach(async ({ page }) => {
+    await enterPlaygroundRoom(page);
+  });
+
+  test('can change linked doc to embed synced doc', async ({ page }) => {
+    await initEmptyParagraphState(page);
+    await focusRichText(page);
+
+    const { createLinkedDoc } = getLinkedDocPopover(page);
+    const linkedDoc = await createLinkedDoc('page1');
+    await linkedDoc.hover();
+
+    const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
+    await expect(toolbar).toBeVisible();
+
+    const switchButton = toolbar.getByRole('button', { name: 'Switch view' });
+    await switchButton.click();
+
+    const embedSyncedDocBtn = toolbar.getByRole('button', {
+      name: 'Embed view',
+    });
+    await expect(embedSyncedDocBtn).toBeVisible();
+
+    await embedSyncedDocBtn.click();
+    await waitNextFrame(page, 200);
+
+    const embedSyncedBlock = page.locator('affine-embed-synced-doc-block');
+    expect(await embedSyncedBlock.count()).toBe(1);
+  });
+
+  test('can change embed synced doc to card view', async ({ page }) => {
+    await initEmbedSyncedDocState(page, [
+      { title: 'Root', content: 'Hello from Root' },
+      { title: 'Doc 2', content: 'Hello from Doc 2' },
+    ]);
+
+    const syncedDoc = page.locator('affine-embed-synced-doc-block');
+    await syncedDoc.click();
+
+    await waitNextFrame(page, 500);
+    const toolbar = page.locator(
+      // TODO(@L-Sun): simplify this selector after that toolbar widget are disabled in preview rendering is ready
+      'affine-page-root > div > affine-toolbar-widget editor-toolbar'
+    );
+    await expect(toolbar).toBeVisible();
+
+    const switchBtn = toolbar.getByRole('button', { name: 'Switch view' });
+    await expect(switchBtn).toBeVisible();
+
+    await switchBtn.click();
+    await waitNextFrame(page, 200);
+
+    const cardBtn = toolbar.getByRole('button', { name: 'Card view' });
+    await cardBtn.click();
+    await waitNextFrame(page, 200);
+
+    const embedSyncedBlock = page.locator('affine-embed-linked-doc-block');
+    expect(await embedSyncedBlock.count()).toBe(1);
+  });
+});

tests/blocksuite/e2e/embed-synced-doc/utils.ts

@@ -0,0 +1,120 @@
+import type {
+  EmbedSyncedDocBlockProps,
+  NoteBlockModel,
+  ParagraphProps,
+  RootBlockProps,
+} from '@blocksuite/affine-model';
+import type { Store } from '@blocksuite/store';
+import type { Page } from '@playwright/test';
+/**
+ * using page.evaluate to init the embed synced doc state
+ * @param page - playwright page
+ * @param data.title - the title of the doc
+ * @param data.content - the content of the doc
+ * @param data.inEdgeless - whether this doc is in parent doc's canvas, default is in page
+ * @param option.chain - doc1 -> doc2 -> doc3 -> ..., if chain is false, doc1 will be the parent of remaining docs
+ * @returns the ids of created docs
+ */
+export async function initEmbedSyncedDocState(
+  page: Page,
+  data: { title: string; content: string; inEdgeless?: boolean }[],
+  option?: {
+    chain?: boolean;
+  }
+) {
+  if (data.length === 0) {
+    throw new Error('Data is empty');
+  }
+
+  return await page.evaluate(
+    async ({ data, option }) => {
+      const createDoc = async (
+        docId: string,
+        title: string,
+        content: string
+      ) => {
+        const { collection, $blocksuite } = window;
+        const Text = $blocksuite.store.Text;
+
+        const store = (
+          collection.getDoc(docId) ?? collection.createDoc(docId)
+        ).getStore();
+        store.load();
+
+        const rootId = store.addBlock('affine:page', {
+          title: new Text(title),
+        } satisfies Partial<RootBlockProps>);
+
+        store.addBlock('affine:surface', {}, rootId);
+
+        const noteId = store.addBlock('affine:note', {}, rootId);
+        store.addBlock(
+          'affine:paragraph',
+          {
+            text: new Text(content),
+          } satisfies Partial<ParagraphProps>,
+          noteId
+        );
+      };
+
+      const getVisibleNote = (store: Store) => {
+        const note = store
+          .getModelsByFlavour('affine:note')
+          .find((note): note is NoteBlockModel => {
+            return (
+              note instanceof NoteBlockModel &&
+              note.props.displayMode === NoteDisplayMode.DocAndEdgeless
+            );
+          });
+        return note ?? null;
+      };
+
+      const docIds = await Promise.all(
+        data.map(async ({ title, content }, index) => {
+          const id = index === 0 ? window.doc.id : `embed-doc-${index}`;
+          await createDoc(id, title, content);
+          return id;
+        })
+      );
+
+      const { NoteBlockModel, NoteDisplayMode } =
+        window.$blocksuite.affineModel;
+
+      let prevId = window.doc.id;
+      for (let index = 1; index < docIds.length; index++) {
+        const docId = docIds[index];
+
+        const store = window.collection
+          .getDoc(option?.chain ? prevId : docIds[0])
+          ?.getStore();
+        if (!store) {
+          throw new Error('Store not found');
+        }
+
+        const note = getVisibleNote(store);
+        if (!note) {
+          throw new Error(`Note not found in ${docId}`);
+        }
+
+        const surface = store.getModelsByFlavour('affine:surface')[0];
+        if (!surface) {
+          throw new Error(`Surface not found in ${docId}`);
+        }
+
+        store.addBlock(
+          'affine:embed-synced-doc',
+          {
+            pageId: docId,
+            xywh: '[0, 100, 370, 100]',
+          } satisfies Partial<EmbedSyncedDocBlockProps>,
+          data[index].inEdgeless ? surface.id : note.id
+        );
+
+        prevId = docId;
+      }
+
+      return docIds;
+    },
+    { data, option }
+  );
+}