feat(image): honor alignment + surface display size for migrated images (#1404) by SailingGreg · Pull Request #1406 · emdash-cms/emdash

SailingGreg · 2026-06-11T13:37:00Z

What does this PR do?

The Gutenberg to Portable Text importer captures WordPress image alignment on the image node, but it was dropped at render and not editable. This wires it through end to end and surfaces the existing display-size controls for migrated images.

Render (packages/core/src/components/Image.astro): emit emdash-image--align-{left,right,center,wide,full} from the nodes alignment`, with default CSS (left/right float and wrap text; center centers; wide/full span the column).
Editor (packages/admin): thread alignment through the PortableText/TipTap serializer (both directions) and the TipTap image node; add an Alignment selector to ImageDetailPanel; reflect alignment in the image NodeView so the editor preview matches the published output.
Display size: relax the gate from width && height to src so WordPress-imported images (which carry only displayWidth/displayHeight, no originals) are resizable; the aspect-ratio lock and reset-to-original degrade gracefully when originals are unknown.

Validated end to end on a real WordPress-migrated site: editor -> save -> published page all agree on the canonical alignment field.

Closes #1404

Type of change

Checklist

I have read CONTRIBUTING.md
pnpm typecheck passes
pnpm lint passes
pnpm test passes (or targeted tests for my change)
pnpm format has been run
I have added/updated tests for my changes (if applicable)
User-visible strings in the admin UI are wrapped for translation (if applicable)
I have added a changeset (this PR changes published packages)
New features link to an approved Discussion

AI-generated code disclosure

This PR includes AI-generated code — model/tool: Claude Opus 4.8 (via Claude Code)

Screenshots / test output

Container-render repro asserts the alignment class is emitted (default render and via a delegating component override); validated end to end on a live WordPress-migrated site (editor -> save -> published render).

…s#1404 render follow-up)

…-cms#1404 render follow-up) Renders the real RAFYC image node through astro-portabletext via the production dispatch (type.image -> Image.astro), default vs delegating override vs no-locals. All three emit a valid src: the override receives the full node intact and delegation to <Image> does NOT render empty. Confirms alignment is dropped.

…d images (emdash-cms#1404) Renderer (core/Image.astro): add alignment to the PT image node props and emit an emdash-image--align-{left,right,center,wide,full} figure class with default CSS (floats wrap text; wide/full span the column). Editor (admin): thread alignment through the PortableText<->TipTap serializer (both directions), the TipTap image node attribute/commands, and add an alignment selector to ImageDetailPanel. Also relax the Display Size gate from (width && height) to (src) so migrated WordPress images, which carry only displayWidth/displayHeight and no original dims, can still be resized; the aspect-ratio lock and reset-to-original now degrade gracefully when originals are unknown. Repro test asserts the renderer now emits the alignment class.

Float left/right (text wraps) and size center/wide/full in the TipTap image NodeView so the editor preview matches the published <Image> output.

changeset-bot · 2026-06-11T13:37:08Z

🦋 Changeset detected

Latest commit: f681393

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 14 packages

Name	Type
emdash	Patch
@emdash-cms/cloudflare	Patch
@emdash-cms/sandbox-workerd	Patch
@emdash-cms/fixture-perf-site	Patch
@emdash-cms/perf-demo-site	Patch
@emdash-cms/cache-demo-site	Patch
@emdash-cms/admin	Patch
@emdash-cms/auth	Patch
@emdash-cms/blocks	Patch
@emdash-cms/gutenberg-to-portable-text	Patch
@emdash-cms/x402	Patch
create-emdash	Patch
@emdash-cms/auth-atproto	Patch
@emdash-cms/plugin-embeds	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2026-06-11T13:39:38Z

All contributors have signed the CLA ✍️ ✅
_{Posted by the CLA Assistant Lite bot.}

SailingGreg · 2026-06-11T13:49:22Z

I have read the CLA Document and I hereby sign the CLA

…rences)

Add a max-width:640px media query so left/right-aligned images drop to full-width blocks on phones instead of staying floated and cramped.

github-actions · 2026-06-11T19:11:28Z

Overlapping PRs

This PR modifies files that are also changed by other open PRs:

feat(admin): optional link on portable-text image blocks #704 (4 shared files)
Store CSS classes, make editor toolbar extensible #143 (3 shared files)

This may cause merge conflicts or duplicated work. A maintainer will coordinate.

SailingGreg · 2026-06-12T08:20:40Z

Heads-up on the overlap notice

I checked the files this PR shares with the other open image PRs flagged by the overlap bot:

feat(admin): optional link on portable-text image blocks #704 (optional link on image blocks) — 4 shared files: Image.astro, editor/ImageNode.tsx, editor/ImageDetailPanel.tsx, PortableTextEditor.tsx
Store CSS classes, make editor toolbar extensible #143 (store CSS classes / extensible toolbar) — 3 shared files: Image.astro, editor/ImageDetailPanel.tsx, PortableTextEditor.tsx

The three PRs are additive and orthogonal — each threads a different image attribute (alignment here, link in #704, cssClasses in #143) through the same plumbing. The conflicts are almost entirely mechanical "keep all additions" at shared anchors (the ImageAttributes interface, the hasChanges/handleSave blocks, the TipTap addAttributes defaults).

The one spot needing a deliberate (but compatible) resolution is the <figure> tag in Image.astro: this PR and #143 both rewrite it to class:list, which merges cleanly to class:list={["emdash-image", alignment && \emdash-image--align-${alignment}`, extraClasses]}`.

Merge-order preference: happy to go in whatever order suits maintainers, but this one is the smallest and is green/review-ready, so merging it first would let #704/#143 rebase trivially. If #143 lands first instead, I'll fold alignment into its class:list.

pkg-pr-new · 2026-06-12T20:36:09Z

Open in StackBlitz

@emdash-cms/admin

npm i https://pkg.pr.new/@emdash-cms/admin@1406

@emdash-cms/auth

npm i https://pkg.pr.new/@emdash-cms/auth@1406

@emdash-cms/auth-atproto

npm i https://pkg.pr.new/@emdash-cms/auth-atproto@1406

@emdash-cms/blocks

npm i https://pkg.pr.new/@emdash-cms/blocks@1406

@emdash-cms/cloudflare

npm i https://pkg.pr.new/@emdash-cms/cloudflare@1406

@emdash-cms/contentful-to-portable-text

npm i https://pkg.pr.new/@emdash-cms/contentful-to-portable-text@1406

emdash

npm i https://pkg.pr.new/emdash@1406

create-emdash

npm i https://pkg.pr.new/create-emdash@1406

@emdash-cms/gutenberg-to-portable-text

npm i https://pkg.pr.new/@emdash-cms/gutenberg-to-portable-text@1406

@emdash-cms/plugin-cli

npm i https://pkg.pr.new/@emdash-cms/plugin-cli@1406

@emdash-cms/plugin-types

npm i https://pkg.pr.new/@emdash-cms/plugin-types@1406

@emdash-cms/registry-client

npm i https://pkg.pr.new/@emdash-cms/registry-client@1406

@emdash-cms/registry-lexicons

npm i https://pkg.pr.new/@emdash-cms/registry-lexicons@1406

@emdash-cms/sandbox-workerd

npm i https://pkg.pr.new/@emdash-cms/sandbox-workerd@1406

@emdash-cms/x402

npm i https://pkg.pr.new/@emdash-cms/x402@1406

@emdash-cms/plugin-ai-moderation

npm i https://pkg.pr.new/@emdash-cms/plugin-ai-moderation@1406

@emdash-cms/plugin-atproto

npm i https://pkg.pr.new/@emdash-cms/plugin-atproto@1406

@emdash-cms/plugin-audit-log

npm i https://pkg.pr.new/@emdash-cms/plugin-audit-log@1406

@emdash-cms/plugin-color

npm i https://pkg.pr.new/@emdash-cms/plugin-color@1406

@emdash-cms/plugin-embeds

npm i https://pkg.pr.new/@emdash-cms/plugin-embeds@1406

@emdash-cms/plugin-field-kit

npm i https://pkg.pr.new/@emdash-cms/plugin-field-kit@1406

@emdash-cms/plugin-forms

npm i https://pkg.pr.new/@emdash-cms/plugin-forms@1406

@emdash-cms/plugin-webhook-notifier

npm i https://pkg.pr.new/@emdash-cms/plugin-webhook-notifier@1406

commit: f681393

ascorbic

Overall good, but the tests need soem cleanup

ascorbic · 2026-06-12T20:36:23Z

@@ -0,0 +1,61 @@
+/**


This file isn't testing anything real: it's just testing its own local implementations. Delete it: the other test file has the real tests.

Done in c4dfd14 — deleted. The real coverage lives in image-render.render.test.ts.

ascorbic · 2026-06-12T20:37:15Z

@@ -0,0 +1,70 @@
+import { PortableText } from "astro-portabletext";
+/**
+ * Faithful container render for the #1404 follow-up.


Suggested change

* Faithful container render for the #1404 follow-up.

Done in c4dfd14 — dropped that header line.

ascorbic · 2026-06-12T20:37:47Z

+const imgSrc = (html: string) => html.match(/<img[^>]*\bsrc="([^"]*)"/)?.[1] ?? "(no <img>)";
+
+describe("faithful render of migrated image node", () => {
+	test("1. default type.image=Image.astro", async () => {


don't number tests

Done in c4dfd14 — removed the 1./2./3. prefixes.

ascorbic · 2026-06-12T20:38:45Z

@@ -0,0 +1,24 @@
+import { getViteConfig } from "astro/config";


Is this file used anywhere? It looks like nothing is running these tests

It is now — that comment predates the wiring. The render tests need the Astro Vite plugin, so they can't run under the plain-node test:unit config (sweeping them in there broke the whole core suite at collection time). They're now run via a dedicated test:repro script (packages/core/package.json, mirroring test:smoke/test:integration), and CI invokes the config right after test:unit in the Tests job (.github/workflows/ci.yml). The plain-node config also excludes **/*.render.test.ts so it won't re-collect them.

The emdash-cms#1404 follow-up added tests/repro/*.render.test.ts (which import .astro components) plus vitest.repro.config.ts (Astro Vite plugin), but never wired the runner up. The default vitest.config.ts swept the render test into its plain-node run, which cannot transform .astro, so the whole core suite failed to load (0 tests collected). - vitest.config.ts: exclude tests/repro/**/*.render.test.ts (needs Astro) - package.json: add test:repro script (mirrors test:smoke/test:integration) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

5c26f31 split the Astro render test out of the plain-node test:unit run (vitest.repro.config.ts + test:repro script) but the CI invocation was never committed, so the emdash-cms#1404 alignment/display-size render coverage would not execute in CI. Run the repro config right after test:unit in the Tests job. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Reconcile emdash-cms#1404 alignment/display-size work with the emdash-cms#1424 Image.astro responsive-image refactor (getImage + media/responsive.js) on main.

@ascorbic

Per @ascorbic review on emdash-cms#1406: - delete tests/repro/image-render.test.ts: it only exercised local reimplementations (buildRenderMediaUrl), not the real component; the real coverage lives in image-render.render.test.ts. - strip the 1./2./3. numbering from the render test titles. - drop the throwaway emdash-cms#1404-follow-up header line. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

SailingGreg · 2026-06-13T10:55:24Z

Thanks @ascorbic — review feedback addressed in c4dfd14:

Deleted tests/repro/image-render.test.ts — agreed, it only exercised local reimplementations (buildRenderMediaUrl), not the real component. The faithful coverage stays in image-render.render.test.ts.
De-numbered the render test titles (1./2./3. → plain titles).
Dropped the throwaway #1404 follow-up header line.
vitest.repro.config.ts is wired up (replied in-thread): test:repro script + a CI step right after test:unit.

Also rebased onto main (merge c3711c9) so it sits on top of the getImage/media/responsive.js refactor — the render baseline (alignment class + width/height) is unchanged and green.

ascorbic

Thanks!

SailingGreg added 4 commits June 11, 2026 13:34

test(repro): Image.astro src resolution for migrated nodes (emdash-cm…

63e2d8a

…s#1404 render follow-up)

feat(image): reflect alignment in the editor node view (emdash-cms#1404)

697f4e4

Float left/right (text wraps) and size center/wide/full in the TipTap image NodeView so the editor preview matches the published <Image> output.

github-actions Bot added review/needs-review No maintainer or bot review yet area/admin area/core size/L labels Jun 11, 2026

github-actions Bot added the cla: needed label Jun 11, 2026

emdashbot Bot and others added 2 commits June 11, 2026 13:39

style: format

2bfbcd3

chore: add changeset for image alignment fix (emdash-cms#1404)

9589973

github-actions Bot added a commit that referenced this pull request Jun 11, 2026

@SailingGreg has signed the CLA in #1406

631919d

github-actions Bot added cla: signed and removed cla: needed labels Jun 11, 2026

SailingGreg added 2 commits June 11, 2026 14:55

test: genericize emdash-cms#1404 repro comments (drop downstream refe…

85cbce5

…rences)

feat(image): un-float aligned images on narrow screens (emdash-cms#1404)

a260b73

Add a max-width:640px media query so left/right-aligned images drop to full-width blocks on phones instead of staying floated and cramped.

ascorbic added the bot:review Trigger an emdashbot code review on this PR label Jun 11, 2026

github-actions Bot added the overlap label Jun 11, 2026

ascorbic reviewed Jun 12, 2026

View reviewed changes

github-actions Bot added review/awaiting-author Reviewed; waiting on the author to respond and removed review/needs-review No maintainer or bot review yet labels Jun 13, 2026

github-actions Bot added review/needs-rereview Author pushed changes since the last review and removed review/awaiting-author Reviewed; waiting on the author to respond labels Jun 13, 2026

github-actions Bot added the area/ci label Jun 13, 2026

SailingGreg and others added 2 commits June 13, 2026 11:38

Merge branch 'main' into fix/image-work

c3711c9

Reconcile emdash-cms#1404 alignment/display-size work with the emdash-cms#1424 Image.astro responsive-image refactor (getImage + media/responsive.js) on main.

Merge branch 'main' into fix/image-work

f681393

ascorbic added bot:review Trigger an emdashbot code review on this PR and removed bot:review Trigger an emdashbot code review on this PR labels Jun 18, 2026

github-actions Bot mentioned this pull request Jun 22, 2026

fix: preserve image alignment through editor round-trip and render it (#1404) #1576

Closed

10 tasks

ascorbic approved these changes Jun 24, 2026

View reviewed changes

ascorbic merged commit c43c412 into emdash-cms:main Jun 24, 2026
43 checks passed

emdashbot Bot mentioned this pull request Jun 24, 2026

ci: release #1592

Merged

		@@ -0,0 +1,24 @@
		import { getViteConfig } from "astro/config";

Uh oh!

Conversation

SailingGreg commented Jun 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

Type of change

Checklist

AI-generated code disclosure

Screenshots / test output

Uh oh!

changeset-bot Bot commented Jun 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Jun 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

SailingGreg commented Jun 11, 2026

Uh oh!

github-actions Bot commented Jun 11, 2026

Overlapping PRs

Uh oh!

SailingGreg commented Jun 12, 2026

Heads-up on the overlap notice

Uh oh!

pkg-pr-new Bot commented Jun 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ascorbic left a comment

Choose a reason for hiding this comment

Uh oh!

ascorbic Jun 12, 2026

Choose a reason for hiding this comment

Uh oh!

SailingGreg Jun 13, 2026

Choose a reason for hiding this comment

Uh oh!

ascorbic Jun 12, 2026

Choose a reason for hiding this comment

Uh oh!

SailingGreg Jun 13, 2026

Choose a reason for hiding this comment

Uh oh!

ascorbic Jun 12, 2026

Choose a reason for hiding this comment

Uh oh!

SailingGreg Jun 13, 2026

Choose a reason for hiding this comment

Uh oh!

ascorbic Jun 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SailingGreg Jun 13, 2026

Choose a reason for hiding this comment

Uh oh!

SailingGreg commented Jun 13, 2026

Uh oh!

ascorbic left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

SailingGreg commented Jun 11, 2026 •

edited

Loading

changeset-bot Bot commented Jun 11, 2026 •

edited

Loading

github-actions Bot commented Jun 11, 2026 •

edited

Loading

pkg-pr-new Bot commented Jun 12, 2026 •

edited

Loading

ascorbic Jun 12, 2026 •

edited

Loading