Collapse encoded media in editable fields too

[gschier]

Base64 in a request body is never typed by hand. It arrives pasted, and the only
edit anyone makes is replacing it wholesale, which atomic ranges already give us.
So a tag can stand in for it without hiding anything anyone meant to read, and
you see PNG · 2.7 KB with a thumbnail where you pasted.

Only the media rule crosses over. The two that hide text by length alone stay
read-only, since under the column rule a minified body would become uneditable
past the limit.

Finding the media had to change to make this work at all. Every editable field
mixes its language with the twig parser, which mounts the base language as an
overlay, and overlays are not traversed by Tree.iterate, so a rule that walks
the tree sees one enormous Text node and finds nothing inside it. The media rule
now reads the text for a run of base64 instead, which works the same in every
language. Read-only output is unchanged, checked value by value against a
response holding one of every supported type.

[greptile-apps]

Greptile Summary

The PR collapses recognizable encoded media in editable CodeMirror fields while retaining the broader length-based collapsing rules only for read-only output.

• Adds a media-only editor extension backed by grammar-independent base64 scanning.
• Makes collapsed media ranges atomic and exposes copy, preview, and save actions through a toggleable context menu.
• Passes the originating DOM element through context-menu state to improve placement and outside-click handling.
• Separates image clipboard copying from copying the encoded text.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains.

Important Files Changed

Filename	Overview
apps/yaak-client/components/core/Editor/largeValues.ts	Splits media detection from grammar-based length rules, introduces editable media decorations, and updates widget context-menu behavior.
apps/yaak-client/components/core/Editor/Editor.tsx	Configures editable editors with the new media-only extension while preserving the full rule set for read-only editors.
apps/yaak-client/components/core/Editor/extensions.ts	Defines separate read-only and editable extension bundles for large-value collapsing.
apps/yaak-client/components/core/Editor/largeValues.test.ts	Adds coverage for editable media, data URIs, template overlays, range boundaries, and preservation of length-only content.
apps/yaak-client/lib/contextMenu.ts	Adds trigger-element ownership and menu toggle semantics to global context-menu state.
apps/yaak-client/components/core/Dropdown.tsx	Generalizes menu trigger refs to arbitrary HTML elements and passes them into outside-click handling.
apps/yaak-client/lib/largeValue.ts	Separates image clipboard copying from encoded-text copying while preserving fallback behavior.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
  A[Editor document and visible ranges] --> B{Read-only?}
  B -->|Yes| C[Apply media, large-token, and column-cut rules]
  B -->|No| D[Apply media rule only]
  C --> E[Create replacement decorations]
  D --> E
  E --> F[Render atomic media tag]
  F --> G[Toggle context menu]
  G --> H[Copy image or encoded text]
  G --> I[Preview or save media]

Loading

_{Reviews (4): Last reviewed commit: "Drop the repeated icon on the paired cop..." | Re-trigger Greptile}

Dismissed because a newer commit was pushed; Greptile will re-review the current head.

Dismissed because a newer commit was pushed; Greptile will re-review the current head.

Dismissed because a newer commit was pushed; Greptile will re-review the current head.