decaporg / decaporg/decap-cms

hugo shortcodes: Sent invalid data to remark.

Open
#4,895 9 comments 3 reactions 0 assignees View on GitHub
area: extensions/editor-components pinned ssg: hugo type: bug
Dominant language
JavaScript
Stars
19.4k
Forks
3.1k
Avg merge
1d 14h
Merged PRs (30d)
9

Description

Hi,

I am trying to write a widget for hugo shortcode for photoswipe (https://github.com/liwenyip/hugo-easy-gallery) and I keep getting the error, though I have no idea what the reason for this error is and why I keep getting it, because from my POV all the data seems to be correct

```
remarkShortcodes.js:53 Sent invalid data to remark. Plugin: photoswipe_figure. Value: {{< figure link="/img/Blog/2019-05-13_tallinn_2/2019-05-13_001.JPG" thumb="_thumb" size="2720x4096" >}}. Data: {"src":"","link":"/img/Blog/2019-05-13_tallinn_2/2019-05-13_001.JPG"}
```

My shortcode plugin looks like the following (I have commented out a lot of stuff while trying to narrow down the issue):

```javascript
CMS.registerEditorComponent({
id: "photoswipe_figure",
label: "Photoswipe - Figure",
fields: [{
name: "title",
label: "Title",
widget: "string"
},
{
name: "src",
label: "Source",
widget: "string"
},
/*{
name: "useThumb",
label: "Use Thumbnail",
widget: "boolean",
default: true
},
{
name: "thumbSuffix",
label: "Thumbnail Suffix",
widget: "string",
default: "_thumb"
},
{
name: "caption",
label: "Caption",
widget: "string"
},
{
name: "attr",
label: "Attribution",
widget: "string"
},
{
name: "attrlink",
label: "Attribution Link",
widget: "string"
},
{
name: "alt",
label: "Alt Text",
widget: "string"
},*/
],
//pattern: /{{< figure (src="[a-zA-Z0-9-_/\\.]+")?\s*(link="[a-zA-Z0-9-_/\\.]+")?\s*(thumb="[a-zA-Z0-9-_]+")?\s*(size="[a-zA-Z0-9-_]+")?\s*(title=".*")?\s*(caption=".*")? >}}/,
pattern: /{{< figure (src="[a-zA-Z0-9-_/\\.]+")?\s*(link="[a-zA-Z0-9-_/\\.]+")?.* >}}/,
fromBlock: function (match) {
function isString (obj) {
return (Object.prototype.toString.call(obj) === '[object String]');
}

const srcRegex = `src="([a-zA-Z0-9-_\/\.]+)"`
const linkRegex = `link="([a-zA-Z0-9-_\/\.]+)"`
const thumbRegex = `thumb="([a-zA-Z0-9-_]+)"`
const sizeRegex = `size="([a-zA-Z0-9-_]+)"`
const titleRegex = `title="(.*)"`
const captionRegex = `caption="(.*)"`
const attrRegex = `attr="(.*)"`
const attrlinkRegex = `attrlink="([a-zA-Z0-9-_\/\.]+)"`
const altRegex = `alt="(.*)"`

let src = ""
let link = ""
let thumb = ""
let size = ""
let title = ""
let caption = ""
let attr = ""
let attrlink = ""
let alt = ""

for(let i in match) {
let m = match[i]
if (m === null || m === undefined || !isString(m)) {
continue
}

let srcMatch = m.match(new RegExp(srcRegex))
if (srcMatch !== null && srcMatch.length > 0) {
src = srcMatch[1]
}

let linkMatch = m.match(new RegExp(linkRegex))
if (linkMatch !== null && linkMatch.length > 0) {
link = linkMatch[1]
}

/*let thumbMatch = m.match(new RegExp(thumbRegex))
if (thumbMatch !== null && thumbMatch.length > 0) {
thumb = thumbMatch[1]
}

let sizeMatch = m.match(new RegExp(sizeRegex))
if (sizeMatch !== null && sizeMatch.length > 0) {
size = sizeMatch[1]
}

let titleMatch = m.match(new RegExp(titleRegex))
if (titleMatch !== null && titleMatch.length > 0) {
title = titleMatch[1]
}

let captionMatch = m.match(new RegExp(captionRegex))
if (captionMatch !== null && captionMatch.length > 0) {
caption = captionMatch[1]
}*/

}

/*let useThumb = true
if (thumb === "" || thumb === null || thumb === undefined) {
useThumb = false
}*/

return {
src: src,
link: link,
/* thumb: thumb,
useThumb: useThumb,
size: size,
title: title,
caption: caption,
attr: "",
attrlink: "",
alt: "",*/
};
},
toBlock: function (obj) {
//let thumbString = ""
//if (obj.useThumb) {
// thumbString = `thumb="${obj.thumbSuffix}`
//}
//return `{{< figure src="${obj.src}" link="${obj.link}" ${thumbString} size="${obj.size}" title="${obj.title}" caption="${obj.caption}" attr="${obj.attr}" attrlink="${obj.attrlink}" >}}`;
return `{{< figure >}}`
},
toPreview: function (obj) {
return `figure`;
//return `${obj.title}${obj.title} ${obj.caption}`;
},
});
```

The reason I am doing the internal matching is because I want to ensure that it does not matter in which order the attributes are set on the actual shortcode and this is the only way I found, because there is nothing in the documentation about that.

How can I further debug this? The error message that I get only tells me that there is something wrong, but not exactly what is wrong and with the debugger I can also not get any further.

**Applicable Versions:**
- Netlify CMS version:
- netlify-cms-app 2.14.14
- netlify-cms-core 2.36.13
- netlify-cms 2.10.84

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.