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 -> decaporg/decap-website#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

[alianza]

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

Thank you for your triage. My apologies, indeed the fix described in the issue is included in the repository. I'm glad you were able to figure this out and still reproduce the issue. Still I'd like to know if this is expected behavior or if this is supposed to work out of the box.

[hip3r]

@alianza we'll figure out what to do. I ran out of time last time. You're right that something could be improved, I'm trying to first figure out exactly what.

Component is similar to example on documentation https://decapcms.org/docs/custom-widgets/#registereditorcomponent
Trying example from documentation, it renders mix of html code and styled markdown. Example needs to be corrected

Example has info what function toPreview expects for output: Preview output for this component. Can either be a string or a React component.
I checked and I'm fairly sure that output of function toPreview is meant to be final html and isn't parsed further.

In conclusion, function toPreview expects output to be string or react component. If you have markdown in custom component and want it's content to be displayed in preview, you need to use your own md to html converter.

I'll use this issue to correct documentation example, otherwise it should provide an answer

p.s. you don't need to parse your entire html, just markdown. As: toPreview: ({ details, summary }) => getCollapsableNoteFragment(summary, marked.parse(details), true),

[domcleal]

In conclusion, function toPreview expects output to be string or react component. If you have markdown in custom component and want it's content to be displayed in preview, you need to use your own md to html converter.

Is it worth leaving this issue open to improve this? It seems like a gap to me in the custom widget functionality.

Since we can add a Markdown widget to the custom widget, it should be possible (with code changes, of course) to also use the Markdown preview widget in toPreview and not have to reimplement it. Perhaps a helper can be used to return the preview widget, like widgetsFor in custom preview components.