So I am trying to implement an editor component that adds a <span>
element for an image caption. This is meant to go with the original image editor component that comes with Netlify CMS.
This is my caption.js file
import React from 'react';
const caption = {
label: 'Image Caption',
id: 'caption',
fromBlock: match =>
match && {
caption: match[1]
},
toBlock: ({ caption }) =>
`![${caption || ''}]`,
// eslint-disable-next-line react/display-name
toPreview: ({ caption }) => {
return <span>{caption || ''}</span>;
},
pattern: /^!\[(.*)\]$/,
fields: [
{
label: 'Caption',
name: 'caption',
},
],
};
export const NetlifyCmsEditorComponentCaption = caption;
export default caption;
And I have it referenced in my cms.js
/* Data from Netlify.com */
import CMS from 'netlify-cms-app'
//Editor Components
import caption from './editor-components/caption'
/* This registers templates with the corresponding
data from netlify config file */
CMS.registerPreviewTemplate('news', NewsPostPreview)
//Register Editor Components
CMS.registerEditorComponent(caption)
It works correctly in the CMS
And shows up in my preview
But does not on my actual site
I am basing this editor component off the image example provided by netlify cms
netlify-cms-editor-component-image
But I believe there is something else going on that takes the toBlock
line and implements the correct <img>
output.
There is not a good example in the docs nor anything on stack overflow, github, or anywhere else I check. I really want to know how editor components actually output the correct code for the actual site. Can anyone explain this?