61 lines
2.1 KiB
JavaScript
61 lines
2.1 KiB
JavaScript
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, state } = props;
|
|
const isFocused = state.selection.hasEdgeIn(node);
|
|
const className = isFocused ? styles.active : null;
|
|
const src = node.data.get('src');
|
|
return (
|
|
<img {...props.attributes} src={src} className={className} />
|
|
);
|
|
}
|
|
};
|
|
|
|
// Local mark renderers.
|
|
export const MARKS = {
|
|
BOLD: {
|
|
fontWeight: 'bold'
|
|
},
|
|
ITALIC: {
|
|
fontStyle: 'italic'
|
|
},
|
|
CODE: {
|
|
fontFamily: 'monospace',
|
|
backgroundColor: '#eee',
|
|
padding: '3px',
|
|
borderRadius: '4px'
|
|
}
|
|
};
|