Skip to content

JSON field type#16809

Merged
brandonkelly merged 6 commits into5.7from
feature/cms-1371-json-field
Mar 2, 2025
Merged

JSON field type#16809
brandonkelly merged 6 commits into5.7from
feature/cms-1371-json-field

Conversation

@brandonkelly
Copy link
Copy Markdown
Member

@brandonkelly brandonkelly commented Mar 1, 2025

Description

Adds a new “JSON” field type, which displays a simple CodeMirror input for entering JSON data.

A JSON field with a simple object value.

All JSON value types are allowed: arrays, objects, and scalar values.

Tempalting

JSON field values are available to templates as craft\fields\data\JsonData objects, which implement ArrayAccess and IteratorAggregate, so they can be treated like arrays.

They also have the following methods:

  • getType() – returns boolean, integer, float, string, or array
  • getValue() – returns the raw value
  • getJson() – returns the JSON-encoded value

getJson() accepts two optional arguments:

  • pretty – whether the JSON value should be prettified
  • indent – the indent string that should be used, e.g. " " or "\t" (" " by default)
{% if entry.myJsonField.type ?? null == 'array' %}
  <ul>
    {% for k, v in entry.myJsonField %}
      <li>{{ k }}: {{ v is scalar ? v : v|json_encode }}</li>
    {% endfor %}
  </ul>
{% endif %}

{{ entry.myJsonField.getJson(true) ?? '' }}

GraphQL

JSON fields will always return either the JSON-encoded value, or null, when queried via GraphQL.

@linear
Copy link
Copy Markdown

linear Bot commented Mar 1, 2025

CMS-1371 JSON field

@brandonkelly brandonkelly marked this pull request as ready for review March 2, 2025 18:45
@brandonkelly brandonkelly merged commit f3ab6c0 into 5.7 Mar 2, 2025
@brandonkelly brandonkelly deleted the feature/cms-1371-json-field branch March 2, 2025 18:49
@Mosnar
Copy link
Copy Markdown
Contributor

Mosnar commented Mar 3, 2025

I'm not totally sure what the use-case is for this, but it might be worth allowing a field setting for a JSON schema to validate against. Perhaps using https://github.com/jsonrainbow/json-schema

Not sure if it's worth the technical debt, just wanted to throw it out there.

@khalwat
Copy link
Copy Markdown
Contributor

khalwat commented Mar 3, 2025

Could just be using https://github.com/nystudio107/craft-code-editor for the text input field (rather than Code Mirror), as you did for the settings for CK Editor. Then you get the Monaco (VS Code) editor, with auto-complete, etc.

@brandonkelly
Copy link
Copy Markdown
Member Author

@Mosnar Yeah crossed my mind! Ideally we’d be able to do it in the editor as well, e.g. using codemirror-json-schema. That’s for CM 6 and we’re currently stuck on v5 because of GraphiQL, but I tasked @brianjhanson with updating that to v3 + CM 6 earlier today.

@khalwat 213KB vs. 63.5MB 🫤

@khalwat
Copy link
Copy Markdown
Contributor

khalwat commented Mar 3, 2025

Yeah the build is large, but that's only because as a general editor, I don't know what parts of it people are going to end up using, so it's a kitchen-sink approach.

Also since it runs via web workers, it's actually super efficient, it's just disk space.

The good news is, if y'all want to make a custom build of it, you can do that, it's all OSS. PRs/improvements welcome!

For example, a good bit of the size of the build is a result of:

  • Including all of the .map files
  • Including .gz versions of each built asset, in addition to the normal build

Monaco is always going to be larger than Code Mirror (in large part because it does more), but if you really care about the space on disk, there's plenty of (arguably useful) fat that could be trimmed.

@khalwat
Copy link
Copy Markdown
Contributor

khalwat commented Mar 3, 2025

Also given that craft-code-editor is already being pulled in by CKEditor, SEOmatic, CP CSS, CP JS, Notifier, Sprig, and a bunch of other plugins... it's likely going to be there already.

So it might be nice to consolidate efforts and improve craft-code-editor to slim it down or optimize it, rather than having multiple packages that sort of do the same thing.

Made an issue here so as not to derail this discussion: nystudio107/craft-code-editor#12

@khalwat
Copy link
Copy Markdown
Contributor

khalwat commented Mar 3, 2025

@Mosnar the Monaco editor supports JSON schemas as well, they are implemented in the CKEditor plugin. Docs: https://github.com/nystudio107/craft-code-editor?tab=readme-ov-file#json-schema-autocompletes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants