Custom editor components don't render markdown

[alianza]

Describe the bug

Custom editor components registered with CMS.registerEditorComponent() don't render their markdown content in the preview window. So if you use the markdown plugin in a custom editor component it just displays the raw markdown in the preview window. E.g. the example <details/> tag custom editor component from the documentation of registerEditorComponent (https://decapcms.org/docs/custom-widgets/#registereditorcomponent), after you fix the details variable names that are wrong -> https://github.com/decaporg/decap-website/issues/13. The widget works but markdown content is not rendered, see screenshot below.

The rest of the page renders all markdown fine. Repo: https://github.com/alianza/portfolio-v2

A working fix but not ideal because of increased initial loading times is to load a library like marked (could not find remark cdn equivalent) via cdn and return marked.parse(markdownContent) in the toPreview() method of the custom editor component. Then it renders correctly in the preview window!

A nicer solution would be if this would just work out of the box, or if we could use the remark markdown parser used by the CMS internally to render markdown content so we don't have to load a 3rd party library for that on the side.

To Reproduce Steps to reproduce the behavior:

1. Clone repo: https://github.com/alianza/portfolio-v2
2. Run npm install
3. Set local_backend to true in public/admin/config.yml
4. Run npm run dev
5. Navigate to http://localhost:3000/admin/index.html
6. Go to projects
7. Open a project
8. Add a collapsible note editor component, add some markdown content
9. Expand collapsible note in preview pane
10. Observe markdown content is not rendered in details tag

Expected behavior Markdown content is rendered in preview pane

Screenshots

Applicable Versions: netlify-cms-app 2.15.72 netlify-cms-core 2.55.2 netlify-cms 2.10.192

• Git provider: GitHub
• OS: Windows 11
• Browser version: Chrome 114
• Node.JS version: (Not using for CMS)

CMS configuration

backend:
  name: git-gateway
  branch: main
  repo: alianza/portfolio-lea

local_backend: false
site_url: https://jw-portfolio-v2.netlify.app/
display_url: https://jw-portfolio-v2.netlify.app/
media_folder: public/assets
public_folder: /assets
publish_mode: editorial_workflow
logo_url: https://jw-portfolio-v2.netlify.app/admin/cms_img.jpg

collections:
  - name: "config"
    label: "Config"
    delete: false
    editor:
      preview: false
    files:
      - name: "config"
        label: "Site Config"
        file: "content/config.json"
        description: "General site settings"
        fields:
          - { label: "Site heading", name: "siteHeading", widget: "string" }
          - { label: "Site title", name: "siteTitle", widget: "string", hint: "The title of the site (Also tab bar)" }
          - { label: "Site description", name: "siteDescription", widget: "text", hint: "Used for meta description" }
          - label: "Online accounts"
            name: "accounts"
            label_singular: "Online account"
            widget: "list"
            summary: "{{fields.name}}"
            fields:
              - { label: "Social media name", name: "name", widget: "string" }
              - { label: "Url", name: "url", widget: "string" }
              - { label: "Icon", name: "icon", widget: "image", required: false }

  - label: 'Projects'
    name: 'projects'
    label_singular: 'Project'
    folder: 'content/projects'
    create: true
    slug: '{{startDate}}_{{slug}}'
    fields:
      - { label: 'Title', name: 'title', widget: 'string' }
      - { label: 'Start Date', name: 'startDate', widget: 'datetime', format: "YYYY-MM-DD", date_format: "YYYY-MM-DD", time_format: false }
      - { label: 'End Date', name: 'endDate', widget: 'datetime', format: "YYYY-MM-DD", date_format: "YYYY-MM-DD", time_format: false, required: false, default: "", hint: "Leave empty if still working (present)" }
      - { label: 'Featured Image', name: 'thumbnail', widget: 'image' }
      - { label: 'Description', name: 'description', widget: 'text' }
      - { label: 'Body', name: 'body', widget: 'markdown' }