where are mdx fields allowed (in addition to contentField)?

[stefanprobst]

hi, i am playing with the new mdx field, and was wondering where mdx fields are allowed in a collection schema.

for example, with the following config,

• having an additional top-level summary mdx field works - it saves to a separate summary.mdx file.
• on a custom component schema (Quiz#question and Quiz.answers in the example), i am getting a "Not implemented" error - is this a temporary limitation, or is support for this planned?

import { config, collection, fields } from "@keystatic/core";
import { block } from "@keystatic/core/content-components";

export default config({
  storage: { kind: "local" },
  collections: {
    posts: collection({
      label: "Posts",
      slugField: "title",
      path: "posts/*/",
      format: { contentField: "content" },
      schema: {
        title: fields.slug({ name: { label: "Title" } }),
        /** This field will be saved as a separate.mdx file. */
        summary: fields.mdx({ label: "Summary" }),
        /** This field will be saved as the body of index.mdx. */
        content: fields.mdx({
          label: "Content",
          components: {
            Quiz: block({
              label: "Quiz",
              schema: {
                /** This field cannot be an mdx field. */
                question: fields.text({ label: "Question", multiline: true }),
                /** This field cannot be an mdx field. */
                answers: fields.array(fields.text({ label: "Answer", multiline: true }), {
                  label: "Answers",
                }),
              },
            }),
          },
        }),
      },
    }),
  },
});

[simonswiss]

Hey!

So — it's not likely that having a MDX field inside another MDX field is going to be possible. However, if you use a wrapper content component, you have access to freeform Markdown + blocks inside that field. Paired with a repeating component, you could achieve what you want nicely.

So in your example, the Quizz component could be turned into a repeating component instead of block. The question would be part of the schema for the repeating component, and for the children array you'd allow the Answer component.

Then, you'd create an Answer component which is a wrapper component, with an empty schema. You can write the answer with MDX inside the wrapper component, and add as many answers as you need since it's a repeating block.

Hopefully that approach makes sense!

UPDATE: I made a little demo in StackBlitz. Lines 18 - 35 of the keystatic.config.tsx show the Quizz and Answer components setup 🤙

[stefanprobst]

hi, thanks so much for this! if i understand the approach correctly, if i wanted to have the Question to also allow mdx (e.g. for links, inline code etc.), i would have to add it as an allowed child to the repeating field as well?

content: fields.mdx({
  label: 'Content',
  components: {
    Quiz: repeating({
      label: 'Quiz',
      schema: {},
      children: ['Question', 'Answer'],
      validation: { children: { min: 1 } },
    }),
    Question: wrapper({
      label: 'Question',
      forSpecificLocations: true,
      schema: {},
    }),
    Answer: wrapper({
      label: 'Answer',
      forSpecificLocations: true,
      schema: {},
    }),
  },
}),

when doing this, is there a way to validate that there is only one Question child in the repeating field? and/or defining a default initial view which includes 1 Question and 1 Answer component (currently, setting validation: { children: { min: 1 } } allows setting an initial view with 1 Question only)?

[simonswiss]

Hey!

The repeating should only be for the set of answers, if you only ever want one single question.

For what you describe, I think I'd make the Quizz a wrapper component. You could have the question in freeform MDX, and then add an Answers (with s) which would be a repeating block, which allows 0 to manyAnswer components.

This would ensure you only have one question only — since it's part of the Quizz content itself.

You can also set the Question as a wrapper and allow it in the repeating — but right now, you won't be able to limit that instance to one per quizz. We might add this functionality later, but it's not a thing as of now.

Would that setup work?

To make it a bit clearer for users creating Quizzes, I added the <NotEditable> component in the ContentView to say "Question" above the question — I feel like this makes it a bit more intuitive where to put the actual question.

And here's the updated StackBlitz.

[stefanprobst]

thanks for this, really appreciated!!

so, in summary, it seems that currently the tradeoff would be between

(1) a Question wrapper component, which means we cannot (for now) validate that users create only a single question per quiz. (same would be true if we had a QuizHelpText component or similar)
(2) a repeating Answers component, which means we cannot currently guarantee that users will only use them as a child of Quiz.

i'll try both approaches, and see what users think.

also, TIL about <NotEditable> -- is it mentioned somewhere in the docs?

again, thanks!

[simonswiss]

2. Not exaclty what you want, but you can ensure the Answer component is only used as a child of Answers with the forSpecificLocations boolean, which will only allow the insertion of a component where it's explicitly added as a child.

As of right now this only works for children of repeating components (which accept an explicit children array), so you can't do this to only allow Answers inside the Quizz wrapper component.

I'll update you if this changes!

Updated StackBlitz here: https://stackblitz.com/edit/keystatic-astro-spr8nq?file=keystatic.config.tsx

(3). The NotEditable component is not documented at this point — I used it after seeing it in an example somewhere 😅