feat: embed-synced-doc-block

[AyushAgrawal-A2]

TOV-443

Playground Demo

Changes:

• Implemented synced block with full support for nested editors (doc & edgeless).
• Implemented synced card element for showing loading, error, deleted and cyclic state (doc & edgeless).
• Updated toolbar for synced block (doc & edgeless).
• Drag & drop from note to surface & vice-versa.
• Clipboard support.
• Edit captions modal (for captions in page editor).
• Added Scale and Pan mutation observers in Block/std/events.
• Resolved conflicting/double action between parent & child editors. (I might have missed a few).
• Updated playground demo.
• Refactor embed-linked-doc to reuse render doc logic in synced block, for matryoshka (cyclic) state.
• Moved getPageMode & getPageUpdatedAt to page-service. This was in embed-linked-doc-service before but is now required by synced block as well. Affine integration is still pending and can be done directly on page-service, after pr merge.

Notes for nested editor:

• Active (editing) state: For a multi editor scenarios, in order to avoid conflicting / double actions... Active editor state was added in PR refactor: support multiple-editors #5878. It allows only one editor to stay active globally. This was tested for parallel editors before and is now being extended for nested editors in this PR. A static slot activeChanged is added to notify all editors and update view according to editor state.

• Scale & Pan mutation observers: When editor (synced block) is in surface, it can be scaled and panned on the whiteboard. Additionally, all ancestor editors will have their own native scaling(zoom) and whiteboard pan. The current active editor needs to factor in total scaling/pan due to transform for displaying overlay (e.g. drag-handle) and canvas items in correct position. This is to be added in addition to child editor's native zoom & pan. As scale and pan is done using transform (translate, scale). This does not change the layout of the element, but just the element's visual size and hence does not trigger resize observers. I have added data attributes (data-scale, data-transform) on relevant elements. On load, block/std searches for all ancestor of current editor having these attributes and initiates mutation observer on these elements.

  • The child editor can subscribe to update using slots on block/std/event and update the viewport dynamically.
  • cumulativeParentScale is also available in PointerStateEvent, and is used in calculating the correct host offsets.

• Drag-handle widget: To support component specific logic for AffineDragHandleWidget, components can register on the static field staticOptionRunner using AffineDragHandleWidget.registerOption.

  • We cannot use this.host & this.page in such options, because this.host on the static field can be referring to editorHost of another editor. Instead editorHost is supplied as an argument from the Widget itself which will always be referring to widget's own editorHost.
  • To prevent multiple registrations for the same block on every new component, this registration is shifted to respective block service.

• Use of element.closest() - In nested editors' element.closest() can return an element from ancestor editors as well. e.g. to check page mode or edgeless mode, !!editorHost.closest('doc-editor') & !!editorHost.closest('edgeless-editor') was used previously. When and edgeless editor is inside a page editor, this will return true for both queries.

• Use of unscoped css - Same as closest() method, unscoped css will get applied to elements in all child editors.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
blocksuite	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 9, 2024 10:36am

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
blocksuite-docs	⬜️ Ignored (Inspect)	Visit Preview		Feb 9, 2024 10:36am

[doodlewind]

It seems that the line diff is significantly larger than the initial draft, could you help pointing out the major source of the additional code, and the modifications worth being know about for other teams members? Thanks 🙏

[AyushAgrawal-A2]

It seems that the line diff is significantly larger than the initial draft, could you help pointing out the major source of the additional code, and the modifications worth being know about for other teams members? Thanks 🙏

@doodlewind
I have added a changelog in the pr description.
The initial draft had only nested editors as an early prototype, synced card element was added later to display loading, error, deleted & cyclic state. element + css + svgs added a bunch of lines. The rest of the line diff is just refactoring.

[doodlewind]

Notes:

1. Use the affine:embed-synced-doc naming
2. Move the utils to be shared between synced-doc and linked-doc.

Thanks for the feat!