/* eslint-disable react/display-name */
import { cloneElement, Children, ReactElement } from 'react';
import Link from 'next/link';
import classNames from 'classnames';
import { BLOCKS, Document, INLINES, MARKS } from '@contentful/rich-text-types';
import {
documentToReactComponents,
Options,
} from '@contentful/rich-text-react-renderer';
import { isLocal, hasLocalID } from '../utils/links';
import { renderEmbeddedEntry } from '../services/render';
import { documentToPlainTextString } from '@contentful/rich-text-plain-text-renderer';
import { CMS } from '../constants';
import { renderShortcode } from '../services/cms';
import { ArticleCallout } from './article/ArticleCallout';
interface Props {
body: Document;
headingClasses?: string; // custom h1-h4 styles
classes?: string; // custom styles for regular text (color, font weight, etc.)
}
export function RichBody(props: Props): ReactElement {
const { body, headingClasses, classes } = props;
const options: Options = {
renderMark: {
[MARKS.BOLD]: text => (
{text}
),
[MARKS.ITALIC]: text => (
{text}
),
[MARKS.UNDERLINE]: text => (
{text}
),
[MARKS.CODE]: text => (
{text}
),
},
renderNode: {
[INLINES.HYPERLINK]: (node, children) => {
const url =
node.data.uri.indexOf('://oxen.io') >= 0
? node.data.uri.split('://oxen.io')[1]
: node.data.uri;
return (
{children}
);
},
[INLINES.EMBEDDED_ENTRY]: (node, children) => {
return renderEmbeddedEntry({ node, isInline: true });
},
[BLOCKS.PARAGRAPH]: (node, children) => {
// Grab shortcodes
// const children;
const plaintext = documentToPlainTextString(node);
const isShortcode = CMS.SHORTCODE_REGEX.test(plaintext);
if (isShortcode) {
return renderShortcode(plaintext);
} else {
let hasImage = false;
Children.map(children, (child: any) => {
if (child.type === 'figure') {
hasImage = true;
return;
}
});
if (hasImage) {
return (
{children}
);
}
return (
{children}
); } }, [BLOCKS.HEADING_1]: (node, children) => (