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' }

[alianza]

Will there ever be support on this, I still don't have this working and it is pretty standard behavior which I'm trying to achieve. Also this is a use-case documented in the documentation but it's not working properly!

[hip3r]

this is open-source project. You're welcome to contribute. Pretty standard should also be to describe an issue in a way, that can easily be reproduced 😉

I copied config.yml and public/admin/index.html files from mentioned repo, to recreate the issue. My preview pane is rendered. I also cloned repo and tried on it, result is the same

Later I figured out that instructions to recreate issue are errorneous, since code already includes workaround marked.parse(). Removing that part of code lead me to the screen with issue, where I can finaly confirm to see it. Proper screenshot for an issue would look like this (without some panel hiding preview pane)

Writing down details of my research, to help the one that will try next time