feat: add diff view

[juice49]

Description

This branch adds a diff view for comparing documents. Primarily, this is for use with versions, but it has been designed to support comparing any two documents.

Most of the commits are supporting work (this should probably be a stack). The main feature addition occurs in 2048903.

Navigating to diff view

Users can navigate to the diff view by setting the following URL search parameters:

| Name               | Type                  | Required | Description                                                                                              |
|--------------------|-----------------------|----------|----------------------------------------------------------------------------------------------------------|
| `diffView`         | `'version'`           | Required | Enable *version comparison* mode UI.                                                                     |
| `previousDocument` | `${string};${string}` | Required | The document type and id identifying the *previous* document for comparison, delimited by `;` character. |
| `nextDocument`     | `${string};${string}` | Required | The document type and id identifying the *next* document for comparison, delimited by `;` character.     |

Example: specifying both previousDocument and nextDocument

/test/structure/author;8701af36-f4e2-4f32-b13e-fc522ddb381f?perspective=r64awNgUC&structure[diffView]=version&structure[nextDocument]=author%3Bversions.r64awNgUC.8701af36-f4e2-4f32-b13e-fc522ddb381f&structure[previousDocument]=author%3Bversions.rO2NP9B76.8701af36-f4e2-4f32-b13e-fc522ddb381f

New dependency: ScrollMirror

I've added ScrollMirror to handle scroll position syncing between two panes that may have different heights. This is achieved by syncing the percentage scroll position of each pane. We could implement this directly in the Studio codebase if we wish.

What to review

• General implementation.
• Introduction of ScrollMirror dependency.

Testing

There are no tests just yet, as I've spent more time than I expected making the code render in a test environment. First, I needed to move the diff view code that was originally organised as a plugin to be part of sanity/structure. Then I encountered many issues with existing imports in sanity/structure resolving to undefined when running in a test environment.

• Navigate to a diff view. Ensure the UI works as expected.
• Navigate to a diff view using the "Compare versions" document action. Ensure the diff view is opened as expected.

I will follow up with tests as soon as these problems are resolved.

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
page-building-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 30, 2025 4:15pm
performance-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 30, 2025 4:15pm
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 30, 2025 4:15pm

2 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		Jan 30, 2025 4:15pm
test-next-studio	⬜️ Ignored (Inspect)	Visit Preview		Jan 30, 2025 4:15pm

[github-actions]

No changes to documentation

[github-actions]

Component Testing Report Updated Jan 30, 2025 4:21 PM (UTC)

❌ Failed Tests (1) -- expand for details

File	Status	Duration	Passed	Skipped	Failed
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	1m 6s	15	0	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	13s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	❌ Failed (Inspect)	1m 20s	5	0	1
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	51s	11	7	0
formBuilder/inputs/PortableText/copyPaste/CopyPasteFields.spec.tsx	✅ Passed (Inspect)	0s	0	12	0
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	26s	6	0	0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx	✅ Passed (Inspect)	14s	3	0	0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx	✅ Passed (Inspect)	27s	6	0	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	1m 8s	15	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	1m 29s	21	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	2m 2s	21	0	0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx	✅ Passed (Inspect)	13s	3	9	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	26s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	1m 44s	21	0	0
formBuilder/tree-editing/TreeEditing.spec.tsx	✅ Passed (Inspect)	0s	0	3	0
formBuilder/tree-editing/TreeEditingNestedObjects.spec.tsx	✅ Passed (Inspect)	0s	0	3	0

[github-actions]

⚡️ Editor Performance Report

Updated Thu, 30 Jan 2025 16:26:47 GMT

Benchmark	reference latency of sanity@latest	experiment latency of this branch	Δ (%) latency difference
recipe (name)	50.0 efps (20ms)	37.0 efps (27ms)	+7ms (+35.0%)	🔴
recipe (description)	58.8 efps (17ms)	41.7 efps (24ms)	+7ms (+41.2%)	🔴
recipe (instructions)	99.9+ efps (5ms)	99.9+ efps (5ms)	+0ms (-/-%)	✅
synthetic (title)	18.9 efps (53ms)	18.9 efps (53ms)	+0ms (-/-%)	✅
synthetic (string inside object)	20.4 efps (49ms)	18.2 efps (55ms)	+6ms (+12.2%)	✅

efps — editor "frames per second". The number of updates assumed to be possible within a second.

Derived from input latency. efps = 1000 / input_latency

Detailed information

🏠 Reference result

The performance result of sanity@latest

Benchmark	latency	p75	p90	p99	blocking time	test duration
recipe (name)	20ms	21ms	27ms	42ms	5ms	8.6s
recipe (description)	17ms	19ms	21ms	32ms	0ms	4.5s
recipe (instructions)	5ms	6ms	7ms	10ms	0ms	3.0s
synthetic (title)	53ms	61ms	68ms	127ms	656ms	13.4s
synthetic (string inside object)	49ms	51ms	67ms	369ms	651ms	8.4s

🧪 Experiment result

The performance result of this branch

Benchmark	latency	p75	p90	p99	blocking time	test duration
recipe (name)	27ms	29ms	34ms	56ms	0ms	7.5s
recipe (description)	24ms	27ms	29ms	48ms	1ms	5.3s
recipe (instructions)	5ms	7ms	8ms	10ms	0ms	3.1s
synthetic (title)	53ms	55ms	61ms	250ms	810ms	14.1s
synthetic (string inside object)	55ms	58ms	68ms	427ms	1566ms	9.2s

📚 Glossary

column definitions

• benchmark — the name of the test, e.g. "article", followed by the label of the field being measured, e.g. "(title)".
• latency — the time between when a key was pressed and when it was rendered. derived from a set of samples. the median (p50) is shown to show the most common latency.
• p75 — the 75th percentile of the input latency in the test run. 75% of the sampled inputs in this benchmark were processed faster than this value. this provides insight into the upper range of typical performance.
• p90 — the 90th percentile of the input latency in the test run. 90% of the sampled inputs were faster than this. this metric helps identify slower interactions that occurred less frequently during the benchmark.
• p99 — the 99th percentile of the input latency in the test run. only 1% of sampled inputs were slower than this. this represents the worst-case scenarios encountered during the benchmark, useful for identifying potential performance outliers.
• blocking time — the total time during which the main thread was blocked, preventing user input and UI updates. this metric helps identify performance bottlenecks that may cause the interface to feel unresponsive.
• test duration — how long the test run took to complete.