fix(markdown-widget): support arbitrary component order (#5597)

This commit is contained in:
SMores
2021-08-17 06:01:52 -04:00
committed by GitHub
parent f7f07c5ad7
commit fbfab7cda5
5 changed files with 168 additions and 35 deletions

View File

@ -118,29 +118,69 @@ CMS.registerEditorComponent(definition)
<script>
CMS.registerEditorComponent({
// Internal id of the component
id: "youtube",
id: "collapsible-note",
// Visible label
label: "Youtube",
label: "Collapsible Note",
// Fields the user need to fill out when adding an instance of the component
fields: [{name: 'id', label: 'Youtube Video ID', widget: 'string'}],
// Pattern to identify a block as being an instance of this component
pattern: /^youtube (\S+)$/,
// Function to extract data elements from the regexp match
fields: [
{
name: 'summary',
label: 'Summary',
widget: 'string'
},
{
name: 'details',
label: 'Details',
widget: 'markdown'
}
],
// Regex pattern used to search for instances of this block in the markdown document.
// Patterns are run in a multline environment (against the entire markdown document),
// and so generally should make use of the multiline flag (`m`). If you need to capture
// newlines in your capturing groups, you can either use something like
// `([\S\s]*)`, or you can additionally enable the "dot all" flag (`s`),
// which will cause `(.*)` to match newlines as well.
//
// Additionally, it's recommended that you use non-greedy capturing groups (e.g.
// `(.*?)` vs `(.*)`), especially if matching against newline characters.
pattern: /^<details>$\s*?<summary>(.*?)<\/summary>\n\n(.*?)\n^<\/details>$/ms,
// Given a RegExp Match object
// (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match#return_value),
// return an object with one property for each field defined in `fields`.
//
// This is used to populate the custom widget in the markdown editor in the CMS.
fromBlock: function(match) {
return {
id: match[1]
summary: match[1],
detail: match[2]
};
},
// Function to create a text block from an instance of this component
toBlock: function(obj) {
return 'youtube ' + obj.id;
// Given an object with one property for each field defined in `fields`,
// return the string you wish to be inserted into your markdown.
//
// This is used to serialize the data from the custom widget to the
// markdown document
toBlock: function(data) {
return `
<details>
<summary>${data.summary}</summary>
${data.detail}
</details>
`;
},
// Preview output for this component. Can either be a string or a React component
// (component gives better render performance)
toPreview: function(obj) {
return (
'<img src="http://img.youtube.com/vi/' + obj.id + '/maxresdefault.jpg" alt="Youtube Video"/>'
);
toPreview: function(data) {
return `
<details>
<summary>${data.summary}</summary>
${data.detail}
</details>
`;
}
});
</script>