decaporg / decaporg/decap-cms

registerEditorComponent Markdown fields stop working on newline entry

Open
#1,044 17 comments 4 reactions 0 assignees View on GitHub
area: extensions/editor-components area: extensions/widgets/markdown exp: intermediate kind: bug pinned status: confirmed
Dominant language
JavaScript
Stars
19.4k
Forks
3.1k
Avg merge
1d 14h
Merged PRs (30d)
9

Description

**- Do you want to request a *feature* or report a *bug*?**
bug

**- What is the current behavior?**
When rendering a registerEditorComponent, using the Markdown field, that has multiple lines the preview breaks.

**- If the current behavior is a bug, please provide the steps to reproduce.**
Create an Editor Component that has a Markdown field and make sure the field has content with multiple lines.

## Example:

```
CMS.registerEditorComponent({
// Internal id of the component
id: "about-section",
// Visible label
label: "About Section",
// Fields the user need to fill out when adding an instance of the component
fields: [{
name: 'heading',
label: 'Heading',
widget: 'string'
}, {
name: 'image',
label: 'Image',
widget: 'image'
}, {
label: "Widget Content",
name: "widget_content",
widget: "markdown"
}],
// Pattern to identify a block as being an instance of this component
pattern: /^{{% about-section heading="(.*)" image="(.*)" %}}((.|\n)*){{% \/about-section %}}$/,
// Function to extract data elements from the regexp match
fromBlock: function(match) {
console.log(match[3]);
return {
heading: match[1],
image: match[2],
widget_content: match[3]
};
},
// Function to create a text block from an instance of this component
toBlock: function(obj) {
return '{{% about-section heading="'+ obj.heading +'" image="'+ obj.image + '" %}}' + obj.widget_content + '{{% /about-section %}}';
},
// Preview output for this component. Can either be a string or a React component
// (component gives better render performance)
toPreview: function(obj) {
return (
'

'+ obj.heading +'

'+ obj.widget_content +'
'
);
}
});
```

**- What is the expected behavior?**
To render markdown correctly.

**- Please mention your CMS, node.js, and operating system version.**
Netlify CMS version 1.0.4
Node.js 5.5.1
HUGO 0.30.2
macOS Sierra 10.12.6

**- Please link or paste your `config.yml` below if applicable.**
```
backend:
name: github
repo: scwambach/sprout # Path to your GitHub repository
branch: master # Branch to update (master by default)

publish_mode: editorial_workflow

media_folder: "static/images/uploads"
public_folder: "/images/uploads"

collections:

##########################################
################## BLOG ##################
##########################################

- name: "thoughts" # Used in routes, e.g., /admin/collections/thoughts
label: "Thoughts" # Used in the UI
folder: "/content/thoughts" # The path to the folder where the documents are stored
create: true # Allow users to create new documents in this collection
slug: "{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
fields: # The fields for each document, usually in front matter
- {label: "Title", name: "title", widget: "string"}
- {label: "Publish Date", name: "date", widget: "datetime"}
- {label: "Draft", name: "draft", widget: "boolean", default: true}
- {label: "Featured Image", required: false, name: "featured_image", widget: "image"}
- label: "Extra Images"
name: "extra_images"
widget: "list"
fields:
- label: Image
name: img
widget: image
- {label: "Body", name: "body", widget: "markdown"}

###########################################
################ PORTFOLIO ################
###########################################

- name: "portfolio" # Used in routes, e.g., /admin/collections/portfolio
label: "Portfolio" # Used in the UI
folder: "/content/portfolio" # The path to the folder where the documents are stored
create: true # Allow users to create new documents in this collection
slug: "{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
fields: # The fields for each document, usually in front matter
- {label: "Title", name: "title", widget: "string"}
- {label: "Publish Date", name: "date", widget: "datetime"}
- {label: "Draft", name: "draft", widget: "boolean", default: true}
- {label: "Featured Image", name: "featured_image", widget: "image"}
- {label: "Short Name", name: "short_name", widget: "string"}
- label: "Order Number"
name: "order_number"
widget: "number"
default: 0
valueType: "int"
- label: "Credits"
name: "credits"
widget: "list"
fields:
- {label: "Title", name: "title", widget: "string"}
- {label: "Copy", name: "copy", widget: "string"}
- {label: "Link", name: "link", widget: "string"}
- label: "Gallery"
name: "gallery"
widget: "list"
fields:
- label: Image
name: img
widget: image
- {label: "Body", name: "body", widget: "markdown"}

#########################################
################# PAGES #################
#########################################

- name: "pages" # Used in routes, e.g., /admin/collections/pages
label: "Pages" # Used in the UI
folder: "/content" # The path to the folder where the documents are stored
create: true # Allow users to create new documents in this collection
slug: "{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
fields: # The fields for each document, usually in front matter
- {label: "Title", name: "title", widget: "string"}
- {label: "Publish Date", name: "date", widget: "datetime"}
- {label: "Draft", name: "draft", widget: "boolean", default: true}
- {label: "Featured Image", required: false, name: "featured_image", widget: "image"}
- {label: "Body", name: "body", widget: "markdown"}

##########################################
################ SETTINGS ################
##########################################

- label: "Site Settings"
name: "settings"
editor:
preview: false
files:
- label: "Global Settings"
name: "global"
file: "data/global.yml"
fields:
- {label: Favicon, name: favicon, widget: image}
- {label: Footer Copy, name: footer_copy, widget: string}
- label: Contact Info
name: contact_info
widget: object
fields:
- {label: Company Name, name: company_name, widget: string}
- {label: Name, name: name, widget: string}
- {label: Title, name: title, widget: string}
- {label: Location, name: location, widget: string}
- {label: Street, name: street, widget: string}
- {label: City State, name: city_state, widget: string}
- label: "Socials"
name: "socials"
widget: "list"
fields:
- label: Icon
name: icon
widget: string
- label: URL
name: url
widget: string
```

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.