Skip to content

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

Merged
ascorbic merged 2 commits into
emdash-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 into
emdash-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

changeset-bot Bot commented Apr 12, 2026

Copy link
Copy Markdown

🦋 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

@ascorbic ascorbic left a comment

Copy link
Copy Markdown
Collaborator

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

Comment thread packages/admin/src/components/ContentEditor.tsx Outdated
Comment thread packages/admin/src/components/ContentEditor.tsx
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 #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

pkg-pr-new Bot commented Apr 14, 2026

Copy link
Copy Markdown

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

@ascorbic ascorbic left a comment

Copy link
Copy Markdown
Collaborator

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
0aveRyan pushed a commit to 0aveRyan/emdash that referenced this pull request Apr 27, 2026
* fix(admin): add JSON field editor in content forms

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>

* fix(admin): move JSON validation to onBlur and add i18n

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>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment