Skip to content

fix(files): stop the file-viewer image reshift on open - #6390

Merged
waleedlatif1 merged 2 commits into
stagingfrom
fix/file-viewer-image-reshift
Aug 7, 2026
Merged

fix(files): stop the file-viewer image reshift on open#6390
waleedlatif1 merged 2 commits into
stagingfrom
fix/file-viewer-image-reshift

Conversation

@waleedlatif1

Copy link
Copy Markdown
Collaborator

Summary

  • Embedded images in a markdown file reshifted on every open: the image loaded ~2.3s in with no reserved box and shoved everything below it down (CLS ~0.17). The untitled.md mention itself never moved — the image just popped in nearby.
  • Root cause: the intrinsic dimensions are stored server-side, but useWorkspaceImageDimensionsAdapter read the files list via queryClient.getQueryData non-reactively. On a cold file-view load the list isn't cached when the image renders, so it returned null; and with a stable adapter identity it never re-checked when the list resolved → no reservation → reflow.
  • Fix: read the list via a reactive useWorkspaceFiles subscription. The adapter re-identifies when the list arrives, re-running the image node view's memoized dimension read so it reserves the box from the stored dims before the slower image download finishes. Query key is shared (dedupes with surrounding views). Gated behind enabled: !contentSource so the public share page (which passes a share token as workspaceId) doesn't fire a 404.
  • Also fixes a pre-existing warning surfaced during investigation: the @-menu extension and the mention node were both named mention (Duplicate extension names found: ['mention']). Renamed the menu extension to mentionMenu (node keeps mention, its persisted doc type) + moved its storage key.

Type of Change

  • Bug fix

Testing

  • Reproduced + verified in a Playwright CLS harness that drives the real collaborative load path (placeholder→live swap seeded via the same converter the realtime server uses): dims present → 0 shift; dims absent → 0.20.
  • 521 rich-markdown-editor unit tests pass; type-check clean; duplicate-mention warning confirmed gone.
  • ⚠️ Not yet confirmed on deployed staging — the reserve depends on the list fetch (~100–300ms) resolving before the image download (~2.3s), which it should comfortably; a post-deploy re-run of the CLS probe on the staging file page is the final confirmation.

Checklist

  • Code follows project style guidelines
  • Self-reviewed my changes
  • Tests added/updated and passing
  • No new warnings introduced
  • I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

@vercel

vercel Bot commented Aug 7, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Skipped Skipped Aug 7, 2026 10:05pm

Request Review

@cursor

cursor Bot commented Aug 7, 2026

Copy link
Copy Markdown

PR Summary

Low Risk
UI/layout fix and a TipTap extension rename with straightforward storage key updates; no auth, persistence, or collaborative-doc changes beyond existing dimension reporting.

Overview
Fixes layout shift when opening markdown files with embedded images: stored intrinsic dimensions were ignored on cold loads because the image-dimension adapter read the workspace file list once from the query cache instead of subscribing to it. It now uses useWorkspaceFiles, so when the list arrives after the first paint the adapter updates and image node views can reserve space before the image bytes finish loading.

FileViewer disables that subscription when a custom contentSource is provided (public share links pass a share token as workspaceId, which would 404 on the files list API).

Separately, the @ suggestion menu TipTap extension was renamed from mention to mentionMenu (storage key mentionMenu); the inline mention node type stays unchanged, removing duplicate-extension warnings.

Reviewed by Cursor Bugbot for commit 08682da. Configure here.

@greptile-apps

greptile-apps Bot commented Aug 7, 2026

Copy link
Copy Markdown
Contributor

Greptile Summary

The PR makes workspace image metadata reactive so markdown images can reserve their intrinsic dimensions before loading, while avoiding the query for caller-supplied content sources.

  • Renames the menu extension and its storage key from mention to mentionMenu, preserving mention as the persisted node type.
  • Updates the mention-chip fixture to use the renamed storage key.
  • Subscribes the image-dimensions adapter to active workspace files and disables that subscription for public-share content sources.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains.

Important Files Changed

Filename Overview
apps/sim/hooks/queries/workspace-files.ts Replaces the one-shot cache lookup with a reactive active-files subscription and rebuilds the image-dimensions adapter when file metadata arrives.
apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx Disables the workspace-files subscription when a caller supplies its own content source.
apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/mention.ts Renames the menu extension and associated editor storage to mentionMenu to avoid colliding with the persisted mention node.
apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/use-editor-mentions.ts Updates mention-menu state synchronization to consistently use the renamed storage key.
apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/mention-chip.tsx Reads navigation configuration from the renamed mention-menu storage.
apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/mention-chip.test.tsx Correctly updates the test fixture to match the storage rename identified in the previous review.

Reviews (3): Last reviewed commit: "fix(files): stop the duplicate 'mention'..." | Re-trigger Greptile

An embedded image in a markdown file reshifted on every open: it loaded ~2.3s in with no
reserved box and shoved everything below it down (CLS ~0.17).

The intrinsic dimensions ARE stored server-side, but the image node view never read them at
render. useWorkspaceImageDimensionsAdapter read the active files list via
queryClient.getQueryData — non-reactively — so on a cold file-view load it returned null at
first render and, because the adapter identity was stable, never re-checked when the list
later resolved.

Read the list via a reactive useWorkspaceFiles subscription instead: the adapter re-runs the
image node view's memoized dimension read when the list resolves, so it reserves the box from
the stored dimensions before the (slower) image download finishes. The query key is shared, so
it dedupes with surrounding views. Gate it behind `enabled` (driven by the absence of a
caller-supplied contentSource) so the public share page — which passes a share token as
workspaceId — doesn't fire a 404.

Verified in a CLS harness: dims present -> 0 shift; dims absent -> 0.20.
@waleedlatif1
waleedlatif1 force-pushed the fix/file-viewer-image-reshift branch from 4efbf79 to 2abb59e Compare August 7, 2026 21:58
@waleedlatif1

Copy link
Copy Markdown
Collaborator Author

@greptile

@waleedlatif1

Copy link
Copy Markdown
Collaborator Author

@cursor review

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

Reviewed by Cursor Bugbot for commit 2abb59e. Configure here.

The @-mention menu extension and the mention node were both named 'mention', so TipTap logged
"Duplicate extension names found: ['mention']" on every editor (twice under the collaborative
placeholder + live pair). Rename the menu extension to 'mentionMenu' (the node keeps 'mention',
its persisted doc-node type) and move its editor.storage.mention -> editor.storage.mentionMenu.
@waleedlatif1
waleedlatif1 force-pushed the fix/file-viewer-image-reshift branch from 2abb59e to 08682da Compare August 7, 2026 22:04
@waleedlatif1

Copy link
Copy Markdown
Collaborator Author

@greptile

@waleedlatif1

Copy link
Copy Markdown
Collaborator Author

@cursor review

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

Reviewed by Cursor Bugbot for commit 08682da. Configure here.

@waleedlatif1
waleedlatif1 merged commit 40c0a57 into staging Aug 7, 2026
30 checks passed
@waleedlatif1
waleedlatif1 deleted the fix/file-viewer-image-reshift branch August 7, 2026 22:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant