fix(editor): draft embed card matches published card (#857)#873
Open
ericvicenti wants to merge 5 commits into
Open
fix(editor): draft embed card matches published card (#857)#873ericvicenti wants to merge 5 commits into
ericvicenti wants to merge 5 commits into
Conversation
The inline draft embed placeholder and a published Card-view embed were two separate bespoke layouts, so they diverged in icon, border, fonts, padding, and badge placement. Extract the presentational pieces of DocumentCard into shared exports (DocumentCardShell, DocumentCardThumbnail, documentCardContainerClassName) and render both the published card and the draft placeholder through them. The draft keeps its editable title input, summary, draft badge, and options menu, but is now pixel-identical to a published card apart from the Draft tag. Co-Authored-By: Claude Opus 4.8 <[email protected]>
…eal options (#857) - Add a real `border border-border` to the shared document-card container so the draft placeholder and published card have identical, defined borders (previously shadow-only, which read weaker on the draft). - DraftBadge renders in font-sans; the base Badge sets no font-family so it was inheriting the serif content font inside editor/rendered content. - DocumentCard's options menu is now hidden until you hover anywhere over the card (group/item + hiddenUntilItemHover), instead of always showing. Co-Authored-By: Claude Opus 4.8 <[email protected]>
…857) Card and Link embeds render a self-contained card with its own border and shadow, but MediaContainer also wrapped them in a thick `border-2` + muted-bg chrome frame, producing a double border on published cards. Suppress that frame for self-framed embed views so only the card's own thin border shows — matching the draft placeholder. Co-Authored-By: Claude Opus 4.8 <[email protected]>
…n select (#857) The published card's "..." (SubdocumentMenu) previously rendered only while the block was selected. Render it whenever the card is present in edit mode and reveal it via the MediaContainer group-hover (kept visible while selected), so hovering the card surfaces the options menu — matching the always-visible menu on the draft placeholder. Co-Authored-By: Claude Opus 4.8 <[email protected]>
…857) Selection unification and fixes (verified in harness; desktop confirmation still pending — see notes/editor-card-selection-investigation.md): - Single selection source: computeSelected deleted; outline (useIsBlockSelected) and side-menu block tools both derive from FullBlockSelectionPlugin blockIds. - SideMenuView (cached mirror + emitter) deleted; SideMenuPlugin keeps only the drag monitor; SideMenuPositioner subscribes to the plugin directly. - Fix Tippy never repositioning when selection moves between same-line-height blocks (getReferenceClientRect memo missing `block` dep). - Draft cards: select-then-open (body click on unselected card selects only; click on selected card opens the draft). - placeCursor rAF re-apply no longer clobbers a selection made after edit-start. - selectable-node-types extracted so selection plugins don't pull the schema graph. Test infra: e2e harness `?real=1` mounts the REAL DocumentEditor + REAL documentMachine (drive via TEST_MACHINE.send edit.start); draftAndPublished fixture mirrors the issue-857 doc; embed-selection.e2e.ts (9 tests) asserts selection/outline/block-tools agreement from the rendered DOM. Suite verified to fail against unfixed code. Full investigation notes, hypotheses, and ground-truth plan (CDP into the real desktop app): notes/editor-card-selection-investigation.md Co-Authored-By: Claude Opus 4.8 <[email protected]>
ericvicenti
force-pushed
the
fix/857-draft-card-matches-published
branch
from
July 15, 2026 12:29
a2426eb to
78d76b1
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #857
Problem
An inline draft embed placeholder and a published Card-view embed were two completely separate, bespoke layouts, so they diverged: gray file icon vs. green icon tile, dashed border vs. shadow, serif summary vs. sans, different padding and badge placement.
Fix — they now share a component
Extracted the presentational pieces of
DocumentCardinto reusable exports inpackages/ui/src/newspaper.tsx:DocumentCardShell— thumbnail + title + summary + badges + actions layout bodyDocumentCardThumbnail— cover / icon / green-placeholder logicdocumentCardContainerClassName()— shared outer container stylingDocumentCardnow renders through these (pixel-identical).DraftEmbedPlaceholder(packages/editor/src/embed-block.tsx) was rewritten to render the same shell + thumbnail + container class. It keeps the draft-only behavior — editable title input, "Add some details here" summary,DraftBadge, and the draft options menu — but is otherwise the same markup as a published card. The only visual difference is now the Draft tag, as the issue asks.Notes:
aria-label="Draft options"on the menu trigger and wrapped the menu in astopPropagationguard so clicking it doesn't also fire the card's open-draft handler.Verification
tsc --noEmitclean for@shm/uiand@shm/editorembed-blocktests + 4newspapertests passOut of scope
Two other bespoke draft-card variants used in query blocks (
InlineDraftCardCard style,InlineDraftListItemList style) have the same divergence but aren't in the issue screenshot. Can align those with the shared shell in a follow-up.🤖 Generated with Claude Code