I have used the docs to create an htmlSerializer, but even when I hard-code content, it doesn't appear to change the output at all. Is there a step I'm missing? If I misspell the link to htmlSerializer in my Slice, it throws an error, so I know it's resolving the correct path.
What I'm working with currently (for testing):
import React from 'react';
import { RichText, Elements } from 'prismic-reactjs';
import ReactPlayer from 'react-player/lazy'
// -- Function to add unique key to props
const propsWithUniqueKey = function(props, key) {
return Object.assign(props || {}, { key });
};
// -- HTML Serializer
const prismicSerializer = function(type, element, content, children, key) {
var props = {};
switch(type) {
case Elements.heading1: // Heading 1
return React.createElement('h1', propsWithUniqueKey(props, key), children);
case Elements.heading2: // Heading 2
return React.createElement('h2', propsWithUniqueKey(props, key), children);
case Elements.heading3: // Heading 3
return React.createElement('h3', propsWithUniqueKey(props, key), children);
case Elements.heading4: // Heading 4
return React.createElement('h4', propsWithUniqueKey(props, key), children);
case Elements.heading5: // Heading 5
return React.createElement('h5', propsWithUniqueKey(props, key), children);
case Elements.heading6: // Heading 6
return React.createElement('h6', propsWithUniqueKey(props, key), children);
case Elements.paragraph: // Paragraph
return <Typography variant="h3">{children}</Typography>
case Elements.preformatted: // Preformatted
return React.createElement('pre', propsWithUniqueKey(props, key), children);
case Elements.strong: // Strong
return React.createElement('strong', propsWithUniqueKey(props, key), children);
case Elements.em: // Emphasis
return React.createElement('em', propsWithUniqueKey(props, key), children);
case Elements.listItem: // Unordered List Item
return React.createElement('li', propsWithUniqueKey(props, key), children);
case Elements.oListItem: // Ordered List Item
return React.createElement('li', propsWithUniqueKey(props, key), children);
case Elements.list: // Unordered List
return React.createElement('ul', propsWithUniqueKey(props, key), children);
case Elements.oList: // Ordered List
return React.createElement('ol', propsWithUniqueKey(props, key), children);
case Elements.image: // Image
const linkUrl = element.linkTo ? element.linkTo.url || linkResolver(element.linkTo) : null;
const linkTarget = (element.linkTo && element.linkTo.target) ? { target: element.linkTo.target } : {};
const linkRel = linkTarget.target ? { rel: 'noopener' } : {};
const img = React.createElement('img', { src: element.url , alt: element.alt || '' });
return React.createElement(
'p',
propsWithUniqueKey({ className: [element.label || '', 'block-img'].join(' ') }, key),
linkUrl ? React.createElement('a', Object.assign({ href: linkUrl }, linkTarget, linkRel), img) : img
);
case Elements.embed: // Embed
return <ReactPlayer url="https://www.youtube.com/watch?v=9ulOEpbdF-o" />
case Elements.hyperlink: // Image
const targetAttr = element.data.target ? { target: element.data.target } : {};
const relAttr = element.data.target ? { rel: 'noopener' } : {};
props = Object.assign({
href: element.data.url || linkResolver(element.data)
}, targetAttr, relAttr);
return React.createElement('a', propsWithUniqueKey(props, key), children);
case Elements.label: // Label
props = element.data ? Object.assign({}, { className: element.data.label }) : {};
return React.createElement('span', propsWithUniqueKey(props, key), children);
case Elements.span: // Span
if (content) {
return content.split("\n").reduce((acc, p) => {
if (acc.length === 0) {
return [p];
} else {
const brIndex = (acc.length + 1)/2 - 1;
const br = React.createElement('br', propsWithUniqueKey({}, brIndex));
return acc.concat([br, p]);
}
}, []);
} else {
return null;
}
default: // Always include a default that returns null
return null;
}
};
My slice:
const WideText = ({ slice }) => {
const styles = theme()
return(
<Grid container component="section">
<RichText render={slice.primary.text} htmlSerializer={prismicSerializer} />
</Grid>
)}
export default WideText;
