fix(editor): hide edgeless only note in synced doc block (#10277)

Closes: [BS-2616](https://linear.app/affine-design/issue/BS-2616/embed-view-%E5%B1%95%E7%A4%BA%E4%B8%8D%E8%AF%A5%E5%87%BA%E7%8E%B0%E7%9A%84-note-%E5%86%85%E5%AE%B9)

blocksuite/blocks/src/root-block/preview/preview-root-block.ts

@@ -1,5 +1,8 @@
+import { NoteBlockModel, NoteDisplayMode } from '@blocksuite/affine-model';
+import { matchModels } from '@blocksuite/affine-shared/utils';
 import { BlockComponent } from '@blocksuite/block-std';
 import { css, html } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
 
 import { ReadOnlyClipboard } from '../clipboard/readonly-clipboard';
 
@@ -24,8 +27,21 @@ export class PreviewRootBlockComponent extends BlockComponent {
   }
 
   override renderBlock() {
-    return html`<div class="affine-preview-root">
+    const widgets = html`${repeat(
-      ${this.host.renderChildren(this.model)}
+      Object.entries(this.widgets),
-    </div>`;
+      ([id]) => id,
+      ([_, widget]) => widget
+    )}`;
+
+    const children = this.renderChildren(this.model, child => {
+      const isNote = matchModels(child, [NoteBlockModel]);
+      const note = child as NoteBlockModel;
+      const displayOnEdgeless =
+        !!note.displayMode && note.displayMode === NoteDisplayMode.EdgelessOnly;
+      // Should remove deprecated `hidden` property in the future
+      return !(isNote && displayOnEdgeless);
+    });
+
+    return html`<div class="affine-preview-root">${children} ${widgets}</div>`;
   }
 }

tests/affine-local/e2e/blocksuite/embed/synced.spec.ts

@@ -0,0 +1,58 @@
+import { test } from '@affine-test/kit/playwright';
+import {
+  clickEdgelessModeButton,
+  createEdgelessNoteBlock,
+  locateEditorContainer,
+} from '@affine-test/kit/utils/editor';
+import { openHomePage } from '@affine-test/kit/utils/load-page';
+import {
+  clickNewPageButton,
+  createLinkedPage,
+  waitForEditorLoad,
+} from '@affine-test/kit/utils/page-logic';
+import { expect } from '@playwright/test';
+
+const title = 'Synced Block Test';
+
+test.beforeEach(async ({ page }) => {
+  await openHomePage(page);
+  await waitForEditorLoad(page);
+  await clickNewPageButton(page, title);
+  await clickEdgelessModeButton(page);
+  const container = locateEditorContainer(page);
+  await container.click();
+});
+
+test('should not show hidden note in embed view page mode', async ({
+  page,
+}) => {
+  const note = page.locator('affine-edgeless-note');
+  await note.dblclick();
+  await page.keyboard.type('visible content');
+  await createEdgelessNoteBlock(page, [100, 100]);
+  await page.keyboard.press('Enter');
+  await page.keyboard.type('hidden content');
+  await page.keyboard.press('Enter');
+
+  // create a new page and navigate
+  await createLinkedPage(page, 'Test Page');
+  const inlineLink = page.locator('affine-reference');
+  await inlineLink.dblclick();
+
+  // reference the previous page
+  await page.keyboard.press('Enter');
+  await page.keyboard.type('@' + title);
+  const docPopover = page.locator('.linked-doc-popover');
+  await docPopover.getByText(/^Synced Block Test$/).click();
+
+  // switch to embed view
+  await inlineLink.hover();
+  const inlineToolbar = page.locator('reference-popup');
+  await inlineToolbar.getByLabel('Switch view').click();
+  await inlineToolbar.getByLabel('Embed view').click();
+
+  // check the content
+  const embedLink = page.locator('affine-embed-synced-doc-block');
+  expect(embedLink.getByText(/visible content/)).toBeVisible();
+  expect(embedLink.getByText(/hidden content/)).toBeHidden();
+});