Prefixing values from fields that use the markdown widget

[lourd]

I have a page I'm building with Netlify CMS and Gatsby, backed by a file collection. The collections configuration looks something like this:

collections:
  - label: Home Page
    name: home
    editor:
      preview: false
    files:
      - label: Home page sections
        name: home
        file: content/home/home.yml
        fields:
          - name: panels
            widget: list
            fields:
              - name: text
                widget: markdown
              - name: image
                widget: image
                media_folder: ''
                required: false
              - name: alt
                label: Image description
                widget: string
                required: false

Unfortunately the markdown configuration for the text field doesn't "just work" with Gatsby, because Netlify CMS produces a plain string. The output yaml looks something like this:

panels:
  - text: Some **really bold** copy
    image: beautiful-background.jpg
    alt: The sun rising over the ocean
  - text: Something I put in *italics*
    image: beautiful-background.jpg
    alt: The sun rising over the ocean 

and Gatsby (or more specifically, the gatsby-transformer-yaml plugin parses those text fields as string types. So when I render the value from text, it still contains the asterisks and other markdown syntax characters, instead of transformed HTML.

There are other yaml parsers that the Gatsby community's made that can parse individual fields as markdown, but they require prefixing the field's value to do so. gatsby-transformer-yaml-full uses !markdown and gatsby-transformer-yaml-plus uses md//, but it's a configurable option.

A naive solution I'm thinking of is to have some sort of "outputValuePrefix" option for fields that could be prepended onto the generated string by the CMS (and then of course stripped before editing in the CMS).

Describe alternatives you've considered
I've seen some people workaround this by transforming the markdown string into HTML at runtime (1, 2), but this means loading a full markdown parser onto the generated website, a lot of JS, too much for my case, and I would imagine most people's cases.

Additional context
Searching around I've seen this need discussed on the Netlify forums, on StackOverflow, and on this Gatsby issue.

[lourd]

An alternative solution for folks following this trail later is to use a custom schema extension to transform the field from a markdown string to HTML during the build, as described in the Gatsby docs.

[erezrokah]

Hi @lourd I think custom schemas is the way to go here.
Since this is more a Gatsby issue - closing it.

If you really want to handle it in the CMS - a custom widget should work