All custom editor components registered in my project don’t render the preview. What shows in the preview is simply the string returned from toBlock function.
I modified the CMS built-in Image component a little by adding some console.log to debug:
CMS.registerEditorComponent({
label: 'Image Positioned',
id: 'image-positioned',
fromBlock: match => {
console.log('fromBlock, match: ', match);
return match && {
image: match[2],
alt: match[1],
title: match[4]
};
},
toBlock: ({ alt, image, title }) => {
console.log('toBlock, image: ', image, '; alt: ', alt, '; title: ', title);
return `{% [${alt || ''}](${image || ''}${title ? ` "${title.replace(/"/g, '\\"')}"` : ''}) %}`;
},
// eslint-disable-next-line react/display-name
toPreview: ({ alt, image, title }, getAsset, fields) => {
console.log('toPreview, image: ', image, '; alt: ', alt, '; title: ', title);
const imageField = fields?.find(f => f.get('widget') === 'image');
const src = getAsset(image, imageField);
return <img src={src || ''} alt={alt || ''} title={title || ''} />;
},
pattern: /^{%\s\[(.*)\]\((.*?)(\s"(.*)")?\)\s%}$/,
fields: [
{
label: 'Image',
name: 'image',
widget: 'image',
media_library: {
allow_multiple: false,
},
},
{
label: 'Alt Text',
name: 'alt',
},
{
label: 'Title',
name: 'title',
},
],
});
The preview looks like:
The expected behavior is to have the image rendered.
When adding an image using this component, the debug information shows toBlock function is executed twice but toPreview function is never hit.
I registered the same editor component in another project. The preview was working fine. When adding an image in that project, the execution order of functions is toBlock → fromBlock → toPreview.
So the problem is probably not with this editor component but something else. I’ve tried a number of ways to debug and to sync up my project with the working project. None of them worked.
The CMS related scripts in my project can be found in this directory. The custom editor component is defined here.
Could someone help? Thanks very much.
, thank you for letting us know! Looking forward to hearing it. 