Commit f3eb67e9 authored by Matija Obreza's avatar Matija Obreza
Browse files

Allow italics, bold in Descriptor list and Dataset titles

- `<Markdown` supports `basic` attribute that limits what markdown is allowed
- `<MarkdownField` supports `basicMarkdown` property
parent c6203863
......@@ -12,7 +12,7 @@ const DescriptorListCard = ({descriptorList, className}: {descriptorList: Descri
return (
<Card className={ className }>
<CardHeader title={ (
<DescriptorListLink to={ descriptorList }>{ descriptorList.title || 'Untitled' }</DescriptorListLink>
<DescriptorListLink to={ descriptorList }>{ descriptorList.title ? <Markdown basic source={ descriptorList.title } /> : 'Untitled' }</DescriptorListLink>
) } />
<Divider />
{ descriptorList.description && descriptorList.description.substring(0, 200) !== '' && (
......
......@@ -6,23 +6,42 @@ import FormControl from 'material-ui/Form/FormControl';
interface IMarkdownTextProps extends React.HTMLProps<HTMLElement> {
source: string;
basic?: boolean;
}
// TODO Add textLength attribute to trim text here, not in the parent
export default function Markdown({source, style, className}: IMarkdownTextProps) {
export default function Markdown({source, style, className, basic}: IMarkdownTextProps) {
if (source) {
return (<div style={ style }><MarkdownComponent className={ `markdown ${className ? className : ''}` } source={ source } /></div>);
if (basic) {
// the 'markdown-basic' className is used to render the div as inline-block
return (
<MarkdownComponent skipHtml unwrapDisallowed allowedTypes={ [ 'strong', 'emphasis'] }
className={ `markdown-basic ${className ? className : ''}` } source={ source } />
);
} else {
if (style) {
return (
<div style={ style }><MarkdownComponent skipHtml
className={ `markdown ${className ? className : ''}` } source={ source } />
</div>
);
} else {
return <div><MarkdownComponent skipHtml className={ `markdown ${className ? className : ''}` } source={ source } /></div>;
}
}
} else {
return null;
}
}
export const MarkdownField = ({input, InputLabelProps, label, meta: {touched, error}, ...custom}) => (
<FormControl fullWidth>
export const MarkdownField = ({basicMarkdown, input, InputLabelProps, label, meta: {touched, error}, ...custom}) => {
const basic: boolean = basicMarkdown === undefined || null ? false : basicMarkdown;
return (
<FormControl fullWidth>
<InputLabel { ...InputLabelProps }>{ label }</InputLabel>
<Input multiline { ...input } { ...custom } />
<h6>Markdown supported</h6>
</FormControl>
);
<Input multiline={ !basic } { ...input } { ...custom } />
<h6>{ basic ? 'Basic markdown supported: * **' : 'Full markdown supported' }</h6>
</FormControl>
);
};
......@@ -78,7 +78,7 @@ class DatasetCard extends React.Component<IDatasetCardProps, any> {
title={
(
<Link to={ '/datasets/' + dataset.uuid }>
{ dataset.title }
<Markdown basic source={ dataset.title } />
</Link>
)
}
......
......@@ -225,7 +225,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
<Grid item xs={ 12 } className="p-20">
<Card className={ classes.card } square>
<CardHeader className={ classes.cardHeader } title={ (
<span>{ dataset.title } <small>{ dataset.version }</small></span>
<span><Markdown basic source={ dataset.title } /> <small>{ dataset.version }</small></span>
) } />
<Divider />
<CardContent className={ classes.cardContent }>
......
......@@ -48,17 +48,18 @@ class BasicInfoStep extends React.Component<ILoginContainerProps, any> {
editable={ ! (initialValues.uuid && initialValues.version) }
onBlur={ this.save }
/>
<Field
<Field required
name="title"
component={ TextField }
label="Title of the dataset*"
basicMarkdown
component={ MarkdownField }
label="Title of the dataset"
placeholder="Title"
onBlur={ this.save }
/>
<Field
name="description"
component={ MarkdownField }
label="Dataset description*"
label="Dataset description"
placeholder="An abstract, short or long description of the resource. Descriptive details improves discoverability of the resource."
onBlur={ this.save }
/>
......
......@@ -136,7 +136,7 @@ class DescriptorListPage extends React.Component<IDescriptorListPageProps, any>
<Grid item xs={ 12 }>
<Card className={ classes.card } square>
<CardHeader className={ classes.cardHeader } title={ (
<span>{ descriptorList.title } <small>{ descriptorList.versionTag }</small></span>
<span><Markdown basic source={ descriptorList.title } /> <small>{ descriptorList.versionTag }</small></span>
) } />
<Divider />
<CardContent className={ classes.cardContent }>
......
......@@ -19,7 +19,7 @@ const DescriptorListForm = ({error, handleSubmit, initialValues, onPublish, part
editable={ ! (initialValues.uuid && initialValues.version) }
component={ SelectPartner } partners={ partners } />
<Field name="crop" label="Crop code" placeholder="maize" component={ TextField } />
<Field required name="title" label="Descriptor list title" placeholder="My descriptor" component={ TextField } />
<Field required name="title" label="Descriptor list title" placeholder="Descriptors for" basicMarkdown component={ MarkdownField } />
<Field name="description" label="Description" placeholder="Full description of the descriptor list" component={ MarkdownField } />
<Field required name="versionTag" label="Version tag" placeholder="1.0" component={ TextField } />
<Field required name="publisher" label="Publisher" placeholder="" component={ TextField } />
......
......@@ -429,6 +429,7 @@ table.genesys-table {
}
}
}
// Markdown
.markdown {
& > :first-child {
......@@ -454,6 +455,11 @@ table.genesys-table {
}
}
// Markdown basic: the inlined version
div.markdown-basic {
display: inline-block;
}
h1, h2, h3, h4, h5, h6 {
&:first-child {
margin-top: 0;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment