Custom editor component does not render the preview

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:

	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 toBlockfromBlocktoPreview.

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.

Hiya @cindyli and welcome to Netlify’s forums! Despite the CMS being named the Netlify CMS, our staff aren’t actively maintaining it or supporting it these days. You are of course welcome to extend, fork, and use the code however you see fit, but we won’t be able to help you extend or debug extensions such as you describe. And, some former maintainers of the CMS such as @tomrutgers do still hang around here and might have some insight, but I wanted to make sure you weren’t holding your breath for some authoritative response from our staff, or anyway, be aware this is it :slight_smile:

There are some places you could still look for help, not sure if it will work, but maybe worth a try:

I think your preview template isn’t actually being picked up, or it’s trying to render the data rather than showing the output of the editor component. Have you tried moving the registerEditorComponent function before the registerPreviewTemplate?

Thanks for the reply, @tomrutgers. I did try moving the registerEditorComponent function before the registerPreviewTemplate. It didn’t help.

After more documentation reading, I suspect the problem is because I didn’t call widgetFor for fields that are using the markdown widget. As specified in the documentation, widgetFor returns the appropriate widget preview component for a given field.

I’m on holiday right now. I will find out if it is because of this after the holiday. I will keep this thread posted.

1 Like

Hi @cindyli :wave:t6: , thank you for letting us know! Looking forward to hearing it. :smiling_face_with_three_hearts:

@tomrutgers thanks for providing the support and tip. (:

It’s confirmed that calling widgetFor is the key for custom editor components to be rendered properly in the preview.

1 Like

Hi @cindyli :wave:t6: ,

Thanks for letting us know! I appreciate it. (: