static-cms/src/components/Widgets/MarkdownControlElements/localRenderers.js

import React from 'react';
import Block from './Block';
import styles from '../MarkdownControl.css';

/* eslint react/prop-types: 0, react/no-multi-comp: 0 */

// Define the default node type.
export const DEFAULT_NODE = 'paragraph';

// Local node renderers.
export const NODES = {
  'blockquote': (props) => <Block type='blockquote' {...props.attributes}>{props.children}</Block>,
  'unordered_list': props => <Block type='List'><ul {...props.attributes}>{props.children}</ul></Block>,
  'header_one': props => <Block type='Heading1' {...props.attributes}>{props.children}</Block>,
  'header_two': props => <Block type='Heading2' {...props.attributes}>{props.children}</Block>,
  'header_three': props => <Block type='Heading2' {...props.attributes}>{props.children}</Block>,
  'header_four': props => <Block type='Heading2' {...props.attributes}>{props.children}</Block>,
  'header_five': props => <Block type='Heading2' {...props.attributes}>{props.children}</Block>,
  'header_six': props => <Block type='Heading2' {...props.attributes}>{props.children}</Block>,
  'list_item': props => <li {...props.attributes}>{props.children}</li>,
  'paragraph': props => <Block type='Paragraph' {...props.attributes}>{props.children}</Block>,
  'hr': props => {
    const { node, state } = props;
    const isFocused = state.selection.hasEdgeIn(node);
    const className = isFocused ? styles.active : null;
    return (
      <hr className={className} {...props.attributes} />
    );
  },
  'link': (props) => {
    const { data } = props.node;
    const href = data.get('href');
    return <a {...props.attributes} href={href}>{props.children}</a>;
  },
  'image': (props) => {
    const { node } = props;
    const src = node.data.get('src');
    return (
      <img {...props.attributes} src={src} />
    );
  }
};

// Local mark renderers.
export const MARKS = {
  BOLD: {
    fontWeight: 'bold'
  },
  ITALIC: {
    fontStyle: 'italic'
  },
  CODE: {
    fontFamily: 'monospace',
    backgroundColor: '#eee',
    padding: '3px',
    borderRadius: '4px'
  }
};