hugo shortcodes: Sent invalid data to remark.
- 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.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
Assessment
This issue has not been assessed yet.