fix: paste large content with operational ui #7796

Saul-Mirone · 2024-08-01T03:39:16Z

Screen.Recording.2024-08-01.at.10.55.25.mov

vercel · 2024-08-01T03:39:20Z

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	Aug 1, 2024 4:32am

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
blocksuite-docs	⬜️ Ignored (Inspect)	Visit Preview		Aug 1, 2024 4:32am

graphite-app · 2024-08-01T03:39:21Z

Your org has enabled the Graphite merge queue for merging into master

Add the label “merge” to the PR and Graphite will automatically add it to the merge queue when it’s ready to merge.

You must have a Graphite account and log in to Graphite in order to use the merge queue. Sign up using this link.

Saul-Mirone · 2024-08-01T03:39:31Z

fix: paste large content with operational ui #7796 👈
master

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @Saul-Mirone and the rest of your teammates on Graphite

…7791) Closes [BS-942](https://linear.app/affine-design/issue/BS-942/typeerror-cannot-read-properties-of-undefined-reading-id)

@zzj3720

@zzj3720

@zzj3720

doodlewind · 2024-09-21T15:49:59Z

packages/framework/store/src/transformer/job.ts

@@ -470,6 +470,11 @@ export class Job {
      children,
    });

+    const nextTick =
+      typeof window !== 'undefined'
+        ? window.requestAnimationFrame


This is considered too slow in #8380. A brief perf test could be found in

#8427 (comment)

The non-blocking pasting could be MUCH slower.

Try this test file with ~1000 lines, the sync pasting completes immediately but async pasting takes ~10s.

clipboard-test.md

I think the downside switching to sync pasting may be about image importing. Not sure if we can make some improvement on the strategy.

Close #8380 ## Problem The original process of converting snapshot JSON to blocks was significantly slowed to ensure UI responsiveness. It involved two types of async computations: * Asynchronously converting snapshots to draft models. * Asynchronously inserting draft models into the block tree using `doc.addBlock`. Original import sequence: ``` Convert snapshot node A Insert block A Wait for tick Convert snapshot node B Insert block B Wait for tick Convert snapshot node C Insert block C Wait for tick ... ``` Despite `doc.addBlock` being synchronous, a `requestAnimationFrame` interval was added after each block insertion to prevent UI blocking. This resulted in long processing times when pasting thousands of blocks: https://github.com/user-attachments/assets/3a6379c9-621e-490e-a79f-4377494d5915 ## New Design This PR reimplements the process: 1. Convert all snapshot nodes first, either using `Promise.all` or sequential awaits: Firstly we flatten the block tree, asynchronously convert all nodes, then rebuild the tree. 2. Insert the converted draft block tree in batches, **waiting for a tick after each _batch_ instead of after each _block_**. This optimizes both block tree conversion and insertion while maintaining UI responsiveness. ## Performance Tests ### Comparing serial vs parallel (`Promise.all`) snapshot tree conversion: - 1000 blocks: `Promise.all` 4.8ms, series 2.8ms - 60 images: `Promise.all` 2.8ms, series 2.2ms Serial conversion proved faster and was implemented in b90d736. The flatten-rebuild logic was retained for scalability. ### Pasting 1000 blocks performance: Original: ~10s (see screen recording above) New: ~1s with maintained UI responsiveness https://github.com/user-attachments/assets/0202330a-66ce-47f3-b220-44a4e9c7c37d ### Switching to imported documents: Loading the block tree into DOM (by switching to an imported document) causes similar delays in both implementations. --- Legacy first take: <details> This PR significantly improves the performance of block import operations by addressing several inefficiencies in the current implementation: - Removed the need to wait for `requestAnimationFrame` after each block insertion (see #7796), which was causing significant slowdowns. - <del>Fixed the batch mechanism (see #7790) that wasn't properly enabled, replacing serial execution with true parallel processing.</del> - Instead of executing all remaining tasks at once after 100 items (still causing UI freezes), we now process tasks in consistent batches of 100 per tick. - Replaced `setTimeout` with `requestIdleCallback` for batch ticks, better utilizing idle browser time. These optimizations result in much faster block imports while maintaining UI responsiveness. The new implementation processes 100 tasks per tick, striking a balance between speed and smooth user experience. Tested using [clipboard-test.md](https://github.com/user-attachments/files/17088183/clipboard-test.md) with 1000 line and 600 blocks: ## Before (took ~10s to paste) https://github.com/user-attachments/assets/3a6379c9-621e-490e-a79f-4377494d5915 ## After (instant response without blocking UI) https://github.com/user-attachments/assets/dea7c1f9-a8c1-4926-92b7-f5cb40957fad </details>

Saul-Mirone temporarily deployed to Style Check August 1, 2024 03:39 — with GitHub Actions Inactive

Saul-Mirone marked this pull request as ready for review August 1, 2024 03:39

Saul-Mirone force-pushed the 08-01-fix_paste_large_content_with_operational_ui branch from 271983c to 2063e22 Compare August 1, 2024 03:39

Saul-Mirone temporarily deployed to Style Check August 1, 2024 03:39 — with GitHub Actions Inactive

vercel bot deployed to Preview – blocksuite August 1, 2024 03:41 View deployment

Saul-Mirone temporarily deployed to Lightweight Test August 1, 2024 03:43 — with GitHub Actions Inactive

Saul-Mirone temporarily deployed to Integration Test August 1, 2024 03:45 — with GitHub Actions Inactive

Saul-Mirone had a problem deploying to Playground E2E Test August 1, 2024 03:47 — with GitHub Actions Failure

Saul-Mirone temporarily deployed to Playground E2E Test August 1, 2024 03:47 — with GitHub Actions Inactive

Saul-Mirone had a problem deploying to Playground E2E Test August 1, 2024 03:47 — with GitHub Actions Failure

Saul-Mirone temporarily deployed to Playground E2E Test August 1, 2024 03:47 — with GitHub Actions Inactive

fix(blocks): old source or target data may be undefined on connector (#…

14046cf

…7791) Closes [BS-942](https://linear.app/affine-design/issue/BS-942/typeerror-cannot-read-properties-of-undefined-reading-id)

Saul-Mirone force-pushed the 08-01-fix_paste_large_content_with_operational_ui branch from 2063e22 to 14046cf Compare August 1, 2024 04:10

Saul-Mirone temporarily deployed to Style Check August 1, 2024 04:10 — with GitHub Actions Inactive

vercel bot deployed to Preview – blocksuite August 1, 2024 04:11 View deployment

Saul-Mirone temporarily deployed to Lightweight Test August 1, 2024 04:15 — with GitHub Actions Inactive

Saul-Mirone temporarily deployed to Integration Test August 1, 2024 04:17 — with GitHub Actions Inactive

Saul-Mirone temporarily deployed to Playground E2E Test August 1, 2024 04:18 — with GitHub Actions Inactive

chore: fix

5d25a9b

Saul-Mirone temporarily deployed to Style Check August 1, 2024 04:30 — with GitHub Actions Inactive

vercel bot deployed to Preview – blocksuite August 1, 2024 04:32 View deployment

Saul-Mirone temporarily deployed to Lightweight Test August 1, 2024 04:34 — with GitHub Actions Inactive

Saul-Mirone temporarily deployed to Integration Test August 1, 2024 04:36 — with GitHub Actions Inactive

Saul-Mirone temporarily deployed to Playground E2E Test August 1, 2024 04:37 — with GitHub Actions Inactive

Saul-Mirone merged commit d836a06 into master Aug 1, 2024
19 checks passed

Saul-Mirone deleted the 08-01-fix_paste_large_content_with_operational_ui branch August 1, 2024 04:52

L-Sun mentioned this pull request Aug 1, 2024

chore: bump blocksuite toeverything/AFFiNE#7696

Merged

doodlewind mentioned this pull request Sep 21, 2024

perf: faster tick for snapshot #8427

Closed

doodlewind reviewed Sep 21, 2024

View reviewed changes

doodlewind mentioned this pull request Sep 22, 2024

perf: optimize snapshot job handling #8428

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: paste large content with operational ui #7796

fix: paste large content with operational ui #7796

Saul-Mirone commented Aug 1, 2024 •

edited

Loading

vercel bot commented Aug 1, 2024 •

edited

Loading

graphite-app bot commented Aug 1, 2024

Saul-Mirone commented Aug 1, 2024

doodlewind Sep 21, 2024 •

edited

Loading

fix: paste large content with operational ui #7796

fix: paste large content with operational ui #7796

Conversation

Saul-Mirone commented Aug 1, 2024 • edited Loading

vercel bot commented Aug 1, 2024 • edited Loading

graphite-app bot commented Aug 1, 2024

Your org has enabled the Graphite merge queue for merging into master

Saul-Mirone commented Aug 1, 2024

doodlewind Sep 21, 2024 • edited Loading

Choose a reason for hiding this comment

Saul-Mirone commented Aug 1, 2024 •

edited

Loading

vercel bot commented Aug 1, 2024 •

edited

Loading

doodlewind Sep 21, 2024 •

edited

Loading