fix(markdown-widget): support arbitrary component order (#5597)
This commit is contained in:
@ -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>
|
||||
|
Reference in New Issue
Block a user