chore: render spec poc (toeverything#6051)

packages/blocks/src/_specs/_specs.ts

@@ -47,6 +47,7 @@ import {
   SurfaceRefBlockSchema,
   SurfaceRefBlockService,
 } from '../surface-ref-block/index.js';
+import { SyncedBlockSpec } from '../synced-block/synced-spec.js';
 
 const DocPageSpec: BlockSpec<DocPageBlockWidgetName> = {
   schema: PageBlockSchema,
@@ -188,6 +189,7 @@ const CommonFirstPartyBlockSpecs: BlockSpec[] = [
   EmbedGithubBlockSpec,
   EmbedHtmlBlockSpec,
   EmbedLinkedDocBlockSpec,
+  SyncedBlockSpec,
 ];
 
 export const DocEditorBlockSpecs: BlockSpec[] = [

packages/blocks/src/models.ts

@@ -41,6 +41,7 @@ import type { SurfaceBlockModel } from './surface-block/surface-model.js';
 import { SurfaceBlockSchema } from './surface-block/surface-model.js';
 import type { SurfaceRefBlockModel } from './surface-ref-block/surface-ref-model.js';
 import { SurfaceRefBlockSchema } from './surface-ref-block/surface-ref-model.js';
+import { SyncedBlockSchema } from './synced-block/index.js';
 
 export type {
   AttachmentBlockModel,
@@ -82,6 +83,7 @@ export const __unstableSchemas = [
   EmbedGithubBlockSpec.schema,
   EmbedHtmlBlockSpec.schema,
   EmbedLinkedDocBlockSpec.schema,
+  SyncedBlockSchema,
 ] satisfies z.infer<typeof BlockSchema>[];
 
 // TODO support dynamic register

packages/blocks/src/note-block/note-block.ts

@@ -19,7 +19,6 @@ export class NoteBlockComponent extends BlockElement<NoteBlockModel> {
   static override styles = css`
     .affine-note-block-container {
       display: flow-root;
-      position: relative;
     }
     .affine-note-block-container.selected {
       background-color: var(--affine-hover-color);

packages/blocks/src/note-block/note-model.ts

@@ -47,6 +47,7 @@ export const NoteBlockSchema = defineBlockSchema({
       'affine:attachment',
       'affine:surface-ref',
       'affine:embed-*',
+      'affine:synced',
     ],
   },
   toModel: () => {

packages/blocks/src/page-block/page-service.ts

@@ -160,11 +160,19 @@ export class PageService extends BlockService<PageBlockModel> {
       'dragover',
       this.fileDropManager.onDragOver
     );
+
     this.disposables.addFromEvent(
       this.std.host,
       'dragleave',
       this.fileDropManager.onDragLeave
     );
+
+    this.disposables.add(
+      this.std.event.add('pointerDown', ctx => {
+        const state = ctx.get('pointerState');
+        state.raw.stopPropagation();
+      })
+    );
   }
 
   get selectedBlocks() {

packages/blocks/src/synced-block/index.ts

@@ -0,0 +1,8 @@
+import { noop } from '@blocksuite/global/utils';
+
+import { SyncedBlockComponent } from './synced-block.js';
+
+noop(SyncedBlockComponent);
+
+export * from './synced-block.js';
+export * from './synced-model.js';

packages/blocks/src/synced-block/synced-block.ts

@@ -0,0 +1,25 @@
+import { assertExists } from '@blocksuite/global/utils';
+import { BlockElement } from '@blocksuite/lit';
+import { css, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+import { DocEditorBlockSpecs } from '../_specs/_specs.js';
+import type { SyncedBlockModel } from './synced-model.js';
+
+@customElement('affine-synced')
+export class SyncedBlockComponent extends BlockElement<SyncedBlockModel> {
+  static override styles = css`
+    .affine-synced-block.selected {
+      outline: 2px solid var(--affine-brand-color);
+      outline-offset: -2px;
+    }
+  `;
+  override render() {
+    const page = this.std.workspace.getPage(this.model.pageId);
+    assertExists(page);
+    const selected = this.selected?.is('block');
+    return html`<div class="affine-synced-block ${selected ? 'selected' : ''}">
+      ${this.host.renderSpecPortal(page, DocEditorBlockSpecs)}
+    </div>`;
+  }
+}

packages/blocks/src/synced-block/synced-model.ts

@@ -0,0 +1,19 @@
+import { BlockModel, defineBlockSchema } from '@blocksuite/store';
+
+export type SyncedBlockProps = {
+  pageId: string;
+};
+
+export const SyncedBlockSchema = defineBlockSchema({
+  flavour: 'affine:synced',
+  props: (): SyncedBlockProps => ({
+    pageId: '',
+  }),
+  metadata: {
+    version: 1,
+    role: 'content',
+    parent: ['affine:note'],
+  },
+});
+
+export class SyncedBlockModel extends BlockModel<SyncedBlockProps> {}

packages/blocks/src/synced-block/synced-spec.ts

@@ -0,0 +1,11 @@
+import type { BlockSpec } from '@blocksuite/block-std';
+import { literal } from 'lit/static-html.js';
+
+import { SyncedBlockSchema } from './synced-model.js';
+
+export const SyncedBlockSpec: BlockSpec = {
+  schema: SyncedBlockSchema,
+  view: {
+    component: literal`affine-synced`,
+  },
+};

packages/framework/lit/src/element/lit-host.ts

@@ -164,6 +164,14 @@ export class EditorHost extends WithDisposable(ShadowlessElement) {
     ></${tag}>`;
   };
 
+  renderSpecPortal = (page: Page, specs: BlockSpec[]) => {
+    return html`
+      <div contenteditable="false">
+        <editor-host .page=${page} .specs=${specs}></editor-host>
+      </div>
+    `;
+  };
+
   renderModelChildren = (model: BlockModel): TemplateResult => {
     return html`${repeat(
       model.children,

packages/playground/apps/starter/data/index.ts

@@ -13,5 +13,6 @@ export * from './linked.js';
 export * from './multiple-editor.js';
 export * from './pending-structs.js';
 export * from './preset.js';
+export * from './synced.js';
 export type { InitFn } from './utils.js';
 export * from './version-mismatch.js';

packages/playground/apps/starter/data/synced.ts

@@ -0,0 +1,53 @@
+import { Text, type Workspace } from '@blocksuite/store';
+
+import { type InitFn } from './utils';
+
+export const synced: InitFn = async (workspace: Workspace, id: string) => {
+  const pageA = workspace.getPage(id) ?? workspace.createPage({ id });
+  const pageB = workspace.createPage({ id: 'pageB' });
+  pageA.clear();
+  pageB.clear();
+
+  let syncedBlockId = '';
+
+  await pageB.load(() => {
+    // Add page block and surface block at root level
+    const pageBlockId = pageB.addBlock('affine:page', {
+      title: new Text('Page B'),
+    });
+
+    pageB.addBlock('affine:surface', {}, pageBlockId);
+
+    // Add note block inside page block
+    const noteId = pageB.addBlock('affine:note', {}, pageBlockId);
+    // Add paragraph block inside note block
+    pageB.addBlock('affine:paragraph', { text: new Text('QAQ') }, noteId);
+    syncedBlockId = noteId;
+  });
+
+  await pageA.load(() => {
+    // Add page block and surface block at root level
+    const pageBlockId = pageA.addBlock('affine:page', {
+      title: new Text(),
+    });
+
+    pageA.addBlock('affine:surface', {}, pageBlockId);
+    const noteId = pageA.addBlock('affine:note', {}, pageBlockId);
+
+    pageA.addBlock(
+      'affine:synced',
+      {
+        pageId: 'pageB',
+        blockId: syncedBlockId,
+      },
+      noteId
+    );
+  });
+
+  pageB.resetHistory();
+  pageA.resetHistory();
+};
+
+synced.id = 'synced';
+synced.displayName = 'Synced block demo';
+synced.description = 'A simple demo for synced block';

tests/utils/asserts.ts

@@ -88,6 +88,7 @@ export const defaultStore: SerializedStore = {
       'affine:bookmark': 1,
       'affine:attachment': 1,
       'affine:surface-ref': 1,
+      'affine:synced': 1,
     },
     workspaceVersion: WORKSPACE_VERSION,
     pageVersion: PAGE_VERSION,