Skip to content

feat: add quick edit modal for reference fields#936

Merged
stevenle merged 5 commits intomainfrom
codex/add-referencefieldeditormodal-for-quick-editing
Feb 26, 2026
Merged

feat: add quick edit modal for reference fields#936
stevenle merged 5 commits intomainfrom
codex/add-referencefieldeditormodal-for-quick-editing

Conversation

@stevenle
Copy link
Member

@stevenle stevenle commented Feb 25, 2026

Motivation

  • Provide a way to quickly open and edit a referenced document from ReferenceField and ReferencesField without navigating away from the parent doc.
  • Ensure modal edits are only persisted when the user explicitly clicks Save to avoid accidental DB writes while previewing or editing in the modal.

Description

  • Add a new context modal ReferenceFieldEditorModal with useReferenceFieldEditorModal() that embeds a DocEditor inside a DraftDocProvider configured for manual save, and a footer with Cancel and Save buttons.
  • Make modal use manual-save semantics by extending DraftDocController / DraftDocProvider with autoSave and flushOnStop flags and default behavior preserved when not overridden.
  • Wire quick-edit actions into ReferenceField and ReferencesField by adding a pencil Quick edit action icon that opens the new modal for the selected doc id.
  • Add hideStatusBar prop to DocEditor so the modal can render a compact editor UI without the full status bar.
  • Register ReferenceFieldEditorModal with the global ModalsProvider and add minimal modal footer CSS.

Testing

  • Attempted to run a TypeScript check via pnpm -C packages/root-cms exec tsc --noEmit --pretty false, but the environment failed to download pnpm via corepack due to network/proxy restrictions so the compile could not be completed.
  • Attempted a browser screenshot run with Playwright against http://127.0.0.1:3000, but no local app server responded so the check could not capture a running UI.
  • No visual or unit tests were added or executed as part of this change.

Codex Task

Fixes #930

@stevenle stevenle changed the title feat(cms): add ReferenceFieldEditorModal quick-edit modal for reference fields feat: add quick edit modal for reference fields Feb 25, 2026
@stevenle stevenle requested a review from jeremydw February 25, 2026 23:59
@stevenle
Copy link
Member Author

stevenle commented Feb 26, 2026

@jeremydw this is ready for review when you have a sec. i debated back and forth about whether the default click on the reference card should open the modal or whether it should open a new tab, decided that the "quick edit icon" might be a clearer ux indicator but i'm happy to go either way on this one.

screenshots:

Screenshot 2026-02-25 at 3 58 06 PM Screenshot 2026-02-25 at 3 58 09 PM

@jeremydw
Copy link
Member

  1. I think most other CMSes let you click it without a separate icon but I like the deliberateness of the icon so that SGTM. Wondering if we should stack the pencil and trash icons vertically though and center them to better occupy the space.

  2. What do you think about putting the doc status badges, localization, history + publish button inside the modal? I envision scenarios where you want to do a quick edit and publish at the same time. At a minimum I think we should have a button or link to open up the full editor for the reference in a new tab.

@stevenle
Copy link
Member Author

  1. re: vertical icons, i think the ux works a little better with the horizontal layout - with the vertical layout, the tooltips create weird states where if you hover over one with a tooltip, the tooltip blocks you from hovering over the other until you hover away. i think i can move the status badges to below the title though to help with the space issue (i swore i had already done this in another PR)

  2. i personally don't want users to be able to do all of those things here since in the future we'll have things like publishing checks and other things which we don't want to handle from inside another doc. status badge is also already visible from the reference field preview card. i don't want the modal to be something that's left open indefinitely because it doesn't have the same collaborative editing style automatic updates as the main doceditor does. i can add an icon or button to open in a new tab though.

@jeremydw
Copy link
Member

SG; let's add the "Open in new tab" or similar to that modal for now

@stevenle
Copy link
Member Author

i played around with the ux a bit, here's what i liked best:

Screenshot 2026-02-25 at 5 12 46 PM

other options were adding a link to the doc id in the modal title, and having a more subtle action icon button with just a top-right arrow. both of those didn't seem as discoverable so i'm just liking having a small text button best.

@jeremydw
Copy link
Member

One other option - bottom left of modal?

@stevenle
Copy link
Member Author

bottom left kinda felt out of place to me, but i can try it and screenshot if you want to see it.

@stevenle
Copy link
Member Author

i guess i don't mind the bottom left as much as i thought i would. preference?

Screenshot 2026-02-25 at 5 22 49 PM

@stevenle
Copy link
Member Author

made an exec decision and moved it to the bottom left. will submit now.

@stevenle stevenle merged commit 290d7f2 into main Feb 26, 2026
1 check passed
@stevenle stevenle deleted the codex/add-referencefieldeditormodal-for-quick-editing branch February 26, 2026 02:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Open reference fields in pop-up window

2 participants