Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(core): flag application/x-portable-text as portable text #8721

Open
wants to merge 2 commits into
base: next
Choose a base branch
from
Open

fix(core): flag application/x-portable-text as portable text #8721

wants to merge 2 commits into from

Conversation

christianhg
Copy link
Member

Description

This makes it possible to drag inline objects in the editor without getting a
"Can't upload any of these files here" error.

Drag and drop in PTE is still very lackluster:

  1. Block objects like images can be dragged around, but this is purely
    implemented by maintaining an internal drag state, and dragging these
    objects doesn't use the application/x-portable-text MIME type yet.
  2. Inline objects can be dragged more freely. They are stored using
    application/x-portable-text and even support being dragged from one editor
    to another.

application/x-portable-text is what PTE uses when serializing and
deserializing to and from the clipboard. And it's also the MIME type used for
drag and drop going forward. And soon block objects will be stored on this MIME
type as well.

What to review

Verify that you can now drag inline objects around in the editor.

Testing

n/a

Notes for release

It's now possible to drag and drop inline objects in the Portable Text Input.

@christianhg
fix(deps): upgrade @portabletext/editor
a9b4099
@christianhg
fix(core): flag application/x-portable-text as portable text
e1a2f02 
This makes it possible to drag inline objects in the editor without getting a
"Can't upload any of these files here" error.

---

Drag and drop in PTE is still very lackluster:

1. Block objects like images can be dragged around, but this is purely
   implemented by maintaining an internal drag state, and dragging these
   objects doesn't use the `application/x-portable-text` MIME type yet.
2. Inline objects can be dragged more freely. They are stored using
   `application/x-portable-text` and even support being dragged from one editor
   to another.

`application/x-portable-text` is what PTE uses when serializing and
deserializing to and from the clipboard. And it's also the MIME type used for
drag and drop going forward. And soon block objects will be stored on this MIME
type as well.
@christianhg christianhg requested a review from a team as a code owner February 21, 2025 18:32
@christianhg christianhg requested review from juice49 and removed request for a team February 21, 2025 18:32
@vercel Vercel
Copy link

vercel bot commented Feb 21, 2025 •
edited
Loading

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 Feb 21, 2025 6:37pm
performance-studio ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 21, 2025 6:37pm
test-studio ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 21, 2025 6:37pm
2 Skipped Deployments
Name Status Preview Comments Updated (UTC)
studio-workshop ⬜️ Ignored (Inspect) Feb 21, 2025 6:37pm
test-next-studio ⬜️ Ignored (Inspect) Feb 21, 2025 6:37pm

@socket-security Socket Security
Copy link

Updated dependencies detected. Learn more about Socket for GitHub ↗︎

Package New capabilities Transitives Size Publisher
npm/[email protected] 🔁 npm/[email protected] None 0 278 kB react-bot

View full report↗︎

@christianhg christianhg enabled auto-merge (rebase) February 21, 2025 18:35
@github-actions GitHub Actions
Copy link
Contributor

No changes to documentation

@github-actions GitHub Actions
Copy link
Contributor

Coverage Report

Status Category Percentage Covered / Total
🔵 Lines 43% 54993 / 127866
🔵 Statements 43% 54993 / 127866
🔵 Functions 48.11% 2796 / 5811
🔵 Branches 79.5% 10648 / 13393
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
packages/sanity/src/core/form/inputs/common/fileTarget/utils/extractFiles.ts 6.34% 100% 0% 6.34% 12-16, 19-108, 111-112
Generated in workflow #30833 for commit e1a2f02 by the Vitest Coverage Report Action

@github-actions GitHub Actions
Copy link
Contributor

⚡️ Editor Performance Report

Updated Fri, 21 Feb 2025 18:45:10 GMT

Benchmark reference
latency of sanity@latest		 experiment
latency of this branch		 Δ (%)
latency difference
article (title) 26.0 efps (39ms) 23.5 efps (43ms) +4ms (+10.4%) ✅
article (body) 72.2 efps (14ms) 67.6 efps (15ms) +1ms (-/-%) ✅
article (string inside object) 27.0 efps (37ms) 24.4 efps (41ms) +4ms (+10.8%) ✅
article (string inside array) 23.3 efps (43ms) 21.5 efps (47ms) +4ms (+8.1%) ✅
recipe (name) 45.5 efps (22ms) 51.3 efps (20ms) -3ms (-11.4%) ✅
recipe (description) 50.0 efps (20ms) 58.8 efps (17ms) -3ms (-15.0%) ✅
recipe (instructions) 99.9+ efps (5ms) 99.9+ efps (5ms) +0ms (-/-%) ✅
synthetic (title) 20.4 efps (49ms) 20.4 efps (49ms) +0ms (-/-%) ✅
synthetic (string inside object) 20.0 efps (50ms) 20.0 efps (50ms) +0ms (-/-%) ✅

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) 39ms 61ms 69ms 475ms 791ms 10.2s
article (body) 14ms 16ms 18ms 219ms 330ms 5.8s
article (string inside object) 37ms 41ms 71ms 218ms 251ms 7.0s
article (string inside array) 43ms 45ms 55ms 247ms 389ms 7.8s
recipe (name) 22ms 23ms 27ms 73ms 13ms 11.4s
recipe (description) 20ms 22ms 25ms 34ms 0ms 4.9s
recipe (instructions) 5ms 6ms 8ms 10ms 0ms 3.1s
synthetic (title) 49ms 52ms 57ms 252ms 557ms 12.5s
synthetic (string inside object) 50ms 53ms 64ms 396ms 739ms 8.3s

🧪 Experiment result

The performance result of this branch

Benchmark latency p75 p90 p99 blocking time test duration
article (title) 43ms 50ms 94ms 471ms 1012ms 11.3s
article (body) 15ms 18ms 42ms 98ms 365ms 6.0s
article (string inside object) 41ms 44ms 48ms 269ms 321ms 7.7s
article (string inside array) 47ms 51ms 56ms 156ms 548ms 8.0s
recipe (name) 20ms 21ms 27ms 39ms 0ms 6.7s
recipe (description) 17ms 18ms 20ms 35ms 0ms 4.4s
recipe (instructions) 5ms 7ms 8ms 10ms 0ms 3.0s
synthetic (title) 49ms 54ms 59ms 280ms 922ms 13.4s
synthetic (string inside object) 50ms 52ms 62ms 409ms 910ms 8.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.

@github-actions GitHub Actions
Copy link
Contributor

Component Testing Report Updated Feb 21, 2025 6:50 PM (UTC)

❌ Failed Tests (4) -- expand for details
File Status Duration Passed Skipped Failed
comments/CommentInput.spec.tsx ✅ Passed (Inspect) 1m 22s 15 0 0
formBuilder/ArrayInput.spec.tsx ✅ Passed (Inspect) 14s 3 0 0
formBuilder/inputs/PortableText/Annotations.spec.tsx ❌ Failed (Inspect) 2m 41s 3 0 3
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx ✅ Passed (Inspect) 59s 11 7 0
formBuilder/inputs/PortableText/copyPaste/CopyPasteFields.spec.tsx ✅ Passed (Inspect) 0s 0 12 0
formBuilder/inputs/PortableText/Decorators.spec.tsx ✅ Passed (Inspect) 30s 6 0 0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx ✅ Passed (Inspect) 17s 3 0 0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx ✅ Passed (Inspect) 31s 6 0 0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx ❌ Failed (Inspect) 1m 57s 14 0 1
formBuilder/inputs/PortableText/Input.spec.tsx ✅ Passed (Inspect) 1m 50s 21 0 0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx ✅ Passed (Inspect) 2m 25s 21 0 0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx ✅ Passed (Inspect) 15s 3 9 0
formBuilder/inputs/PortableText/Styles.spec.tsx ✅ Passed (Inspect) 31s 6 0 0
formBuilder/inputs/PortableText/Toolbar.spec.tsx ✅ Passed (Inspect) 2m 2s 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@juice49 juice49 Awaiting requested review from juice49 juice49 is a code owner automatically assigned from sanity-io/studio

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@christianhg