chore(core): export EditPortal from sanity

[pedrobonamin]

Description

Exporting EditPortal from sanity to allow users build custom Dialogs or Popover without having to care about Presence and Scroll Virtualizers.

Before this if a user needs to have a custom dialog, they need to include all of the Virtualizer Scroll element and Presence logic by themselves, for example:

+import React, {useRef, useState} from 'react'
+import {
+  ArrayOfObjectsInputProps,
+  FormInput,
+  Path,
+  PresenceOverlay,
+  VirtualizerScrollInstanceProvider,
+} from 'sanity'

+export function ScrollVirtualizerWrapper(props: {children: React.ReactNode}) {
+  const {children} = props
+  const [contentElement, setContentElement] = useState<HTMLDivElement | null>(null)
+  const containerElement = useRef<HTMLDivElement | null>(null)
+
+  return (
+    <Box ref={setContentElement}>
+      <VirtualizerScrollInstanceProvider
+        scrollElement={contentElement}
+        containerElement={containerElement}
+      >
+        <PresenceOverlay margins={[0, 0, 1, 0]}>
+          <Box ref={containerElement}>{children}</Box>
+        </PresenceOverlay>
+      </VirtualizerScrollInstanceProvider>
+    </Box>
+  )
+}
+
 export const CustomFormDialog: React.FC<Props> = ({parentProps, paths, onClose}) => {
   return (
     <Dialog header="Edit Link" id="edit-link" animate width={600} onClose={onClose} zOffset={1000}>
+      <ScrollVirtualizerWrapper>
           ...rest
+      </ScrollVirtualizerWrapper>
     </Dialog>

By importing this component, they could just replace the Dialog for the EditPortal and will get all of the rest for free

+import React, {useRef, useState} from 'react'
+import { EditPortal } from 'sanity'

 export const CustomFormDialog: React.FC<Props> = ({parentProps, paths, onClose}) => {
   return (
-     <Dialog header="Edit Link" id="edit-link" animate width={600} onClose={onClose} zOffset={1000}>
+     <EditPortal header="Edit Link" id="edit-link" animate width={600} onClose={onClose} zOffset={1000}>
       ...rest
-      </Dialog>
+     </EditPortal>

What to review

Testing

Notes for release

Exports edit portal which allow users to build custom Dialogs or Popovers with presence and scroll virtualizer included.

[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 9, 2025 4:47pm
performance-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 9, 2025 4:47pm
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 9, 2025 4:47pm

2 Skipped Deployments

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

[github-actions]

No changes to documentation

[github-actions]

Component Testing Report Updated Jan 9, 2025 4:50 PM (UTC)

❌ Failed Tests (1) -- expand for details

File	Status	Duration	Passed	Skipped	Failed
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	1m 2s	15	0	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	12s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	❌ Failed (Inspect)	1m 19s	5	0	1
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	50s	11	7	0
formBuilder/inputs/PortableText/copyPaste/CopyPasteFields.spec.tsx	✅ Passed (Inspect)	0s	0	12	0
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	25s	6	0	0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx	✅ Passed (Inspect)	14s	3	0	0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx	✅ Passed (Inspect)	26s	6	0	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	1m 6s	15	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	1m 27s	21	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 40s	18	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 43s	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, 09 Jan 2025 16:52:05 GMT

Benchmark	reference latency of sanity@latest	experiment latency of this branch	Δ (%) latency difference
article (title)	25.0 efps (40ms)	24.1 efps (42ms)	+2ms (+3.8%)	✅
article (body)	48.1 efps (21ms)	52.9 efps (19ms)	-2ms (-9.1%)	✅
article (string inside object)	26.3 efps (38ms)	26.3 efps (38ms)	+0ms (-/-%)	✅
article (string inside array)	24.4 efps (41ms)	23.3 efps (43ms)	+2ms (+4.9%)	✅
recipe (name)	50.0 efps (20ms)	52.6 efps (19ms)	-1ms (-5.0%)	✅
recipe (description)	55.6 efps (18ms)	58.8 efps (17ms)	-1ms (-5.6%)	✅
recipe (instructions)	99.9+ efps (6ms)	99.9+ efps (6ms)	+0ms (-/-%)	✅
synthetic (title)	19.2 efps (52ms)	18.5 efps (54ms)	+2ms (+3.8%)	✅
synthetic (string inside object)	19.6 efps (51ms)	19.2 efps (52ms)	+1ms (+2.0%)	✅

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
article (title)	40ms	58ms	69ms	529ms	990ms	10.5s
article (body)	21ms	25ms	32ms	189ms	247ms	5.9s
article (string inside object)	38ms	41ms	45ms	159ms	154ms	6.5s
article (string inside array)	41ms	44ms	49ms	66ms	141ms	6.7s
recipe (name)	20ms	21ms	25ms	31ms	0ms	7.2s
recipe (description)	18ms	20ms	25ms	30ms	0ms	4.4s
recipe (instructions)	6ms	7ms	9ms	12ms	0ms	3.0s
synthetic (title)	52ms	54ms	64ms	134ms	452ms	11.9s
synthetic (string inside object)	51ms	54ms	63ms	551ms	1173ms	8.8s

🧪 Experiment result

The performance result of this branch

Benchmark	latency	p75	p90	p99	blocking time	test duration
article (title)	42ms	48ms	78ms	451ms	864ms	10.7s
article (body)	19ms	21ms	25ms	73ms	210ms	5.5s
article (string inside object)	38ms	40ms	46ms	162ms	138ms	6.8s
article (string inside array)	43ms	45ms	52ms	303ms	445ms	7.2s
recipe (name)	19ms	20ms	22ms	32ms	0ms	6.7s
recipe (description)	17ms	19ms	21ms	25ms	0ms	4.4s
recipe (instructions)	6ms	8ms	9ms	11ms	0ms	3.2s
synthetic (title)	54ms	57ms	60ms	95ms	666ms	11.8s
synthetic (string inside object)	52ms	53ms	68ms	258ms	1041ms	8.5s

📚 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.