Skip to content

fix(admin): add JSON field editor in content forms#489

Merged
ascorbic merged 2 commits intoemdash-cms:mainfrom
all3f0r1:fix/json-field-editor-405
Apr 14, 2026
Merged

fix(admin): add JSON field editor in content forms#489
ascorbic merged 2 commits intoemdash-cms:mainfrom
all3f0r1:fix/json-field-editor-405

Conversation

@all3f0r1
Copy link
Copy Markdown
Contributor

What does this PR do?

The JSON field type was selectable in the schema editor, but had no dedicated input renderer in the content editor. It fell through to the default text Input, which rendered empty for object values since typeof value === "string" is false for objects.

This adds a JsonFieldEditor component that:

  • Serializes object values to formatted JSON for display
  • Parses user input back to a JS value on change
  • Shows inline validation feedback for invalid JSON

Closes #405

Type of change

  • Bug fix
  • Feature (requires approved Discussion)
  • Refactor (no behavior change)
  • Documentation
  • Performance improvement
  • Tests
  • Chore (dependencies, CI, tooling)

Checklist

  • I have read CONTRIBUTING.md
  • pnpm typecheck passes
  • pnpm --silent lint:json | jq '.diagnostics | length' returns 0
  • pnpm test passes (or targeted tests for my change)
  • pnpm format has been run
  • I have added/updated tests for my changes (if applicable)
  • I have added a changeset (if this PR changes a published package)
  • New features link to an approved Discussion: https://github.com/emdash-cms/emdash/discussions/...

AI-generated code disclosure

  • This PR includes AI-generated code

Screenshots / test output

Two new tests added in ContentEditor.test.tsx:

  • renders json fields as a textarea — verifies the JSON field renders a <textarea> element
  • renders json fields with object values as formatted JSON — verifies object data is serialized as pretty-printed JSON

@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Apr 12, 2026

🦋 Changeset detected

Latest commit: 3809470

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

This PR includes changesets to release 9 packages
Name Type
@emdash-cms/admin Patch
emdash Patch
@emdash-cms/cloudflare 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/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

Copy link
Copy Markdown
Collaborator

@ascorbic ascorbic left a comment

Choose a reason for hiding this comment

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

Thanks! Just a couple of notes

all3f0r1 and others added 2 commits April 14, 2026 11:21
The JSON field type had no dedicated case in the field renderer switch,
so it fell through to the default text Input which rendered empty for
object values. Adds a JsonFieldEditor component with a textarea,
JSON.stringify for display, JSON.parse on change, and validation feedback.

Closes emdash-cms#405

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Apply review feedback: parse/reformat JSON on blur instead of every
keystroke, and use Lingui t`` for the "Invalid JSON" error message.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@all3f0r1 all3f0r1 force-pushed the fix/json-field-editor-405 branch from e1487f6 to 3809470 Compare April 14, 2026 10:23
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new bot commented Apr 14, 2026

Open in StackBlitz

@emdash-cms/admin

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

@emdash-cms/auth

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

@emdash-cms/blocks

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

@emdash-cms/cloudflare

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

emdash

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

create-emdash

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

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

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

@emdash-cms/x402

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

@emdash-cms/plugin-ai-moderation

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

@emdash-cms/plugin-atproto

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

@emdash-cms/plugin-audit-log

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

@emdash-cms/plugin-color

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

@emdash-cms/plugin-embeds

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

@emdash-cms/plugin-forms

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

@emdash-cms/plugin-webhook-notifier

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

commit: 3809470

Copy link
Copy Markdown
Collaborator

@ascorbic ascorbic left a comment

Choose a reason for hiding this comment

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

Great, thanks!

@ascorbic ascorbic merged commit 9ea4cf7 into emdash-cms:main Apr 14, 2026
28 checks passed
@emdashbot emdashbot bot mentioned this pull request Apr 14, 2026
@all3f0r1 all3f0r1 deleted the fix/json-field-editor-405 branch April 14, 2026 10:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

JSON field type has no editor in admin UI

2 participants