decaporg / decaporg/decap-cms

Custom editor components don't render markdown

Open
#6,797 5 comments 1 reaction 0 assignees View on GitHub
area: ui/editor/preview-pane
Dominant language
JavaScript
Stars
19.4k
Forks
3.1k
Avg merge
1d 14h
Merged PRs (30d)
9

Description

**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 `` 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**
![image](https://github.com/decaporg/decap-cms/assets/1502192/e41665f8-d27d-4a5f-9ade-785cb10448c1)

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.