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 ...@@ -12,7 +12,7 @@ const DescriptorListCard = ({descriptorList, className}: {descriptorList: Descri
return ( return (
<Card className={ className }> <Card className={ className }>
<CardHeader title={ ( <CardHeader title={ (
<DescriptorListLink to={ descriptorList }>{ descriptorList.title || 'Untitled' }</DescriptorListLink> <DescriptorListLink to={ descriptorList }>{ descriptorList.title ? <Markdown basic source={ descriptorList.title } /> : 'Untitled' }</DescriptorListLink>
) } /> ) } />
<Divider /> <Divider />
{ descriptorList.description && descriptorList.description.substring(0, 200) !== '' && ( { descriptorList.description && descriptorList.description.substring(0, 200) !== '' && (
......
...@@ -6,23 +6,42 @@ import FormControl from 'material-ui/Form/FormControl'; ...@@ -6,23 +6,42 @@ import FormControl from 'material-ui/Form/FormControl';
interface IMarkdownTextProps extends React.HTMLProps<HTMLElement> { interface IMarkdownTextProps extends React.HTMLProps<HTMLElement> {
source: string; source: string;
basic?: boolean;
} }
// TODO Add textLength attribute to trim text here, not in the parent // 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) { 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 { } else {
return null; return null;
} }
} }
export const MarkdownField = ({input, InputLabelProps, label, meta: {touched, error}, ...custom}) => ( export const MarkdownField = ({basicMarkdown, input, InputLabelProps, label, meta: {touched, error}, ...custom}) => {
const basic: boolean = basicMarkdown === undefined || null ? false : basicMarkdown;
<FormControl fullWidth> return (
<InputLabel { ...InputLabelProps }>{ label }</InputLabel> <FormControl fullWidth>
<Input multiline { ...input } { ...custom } /> <InputLabel { ...InputLabelProps }>{ label }</InputLabel>
<h6>Markdown supported</h6> <Input multiline={ !basic } { ...input } { ...custom } />
</FormControl> <h6>{ basic ? 'Basic markdown supported: * **' : 'Full markdown supported' }</h6>
); </FormControl>
);
};
...@@ -78,7 +78,7 @@ class DatasetCard extends React.Component<IDatasetCardProps, any> { ...@@ -78,7 +78,7 @@ class DatasetCard extends React.Component<IDatasetCardProps, any> {
title={ title={
( (
<Link to={ '/datasets/' + dataset.uuid }> <Link to={ '/datasets/' + dataset.uuid }>
{ dataset.title } <Markdown basic source={ dataset.title } />
</Link> </Link>
) )
} }
......
...@@ -225,7 +225,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> { ...@@ -225,7 +225,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
<Grid item xs={ 12 } className="p-20"> <Grid item xs={ 12 } className="p-20">
<Card className={ classes.card } square> <Card className={ classes.card } square>
<CardHeader className={ classes.cardHeader } title={ ( <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 /> <Divider />
<CardContent className={ classes.cardContent }> <CardContent className={ classes.cardContent }>
......
...@@ -48,17 +48,18 @@ class BasicInfoStep extends React.Component<ILoginContainerProps, any> { ...@@ -48,17 +48,18 @@ class BasicInfoStep extends React.Component<ILoginContainerProps, any> {
editable={ ! (initialValues.uuid && initialValues.version) } editable={ ! (initialValues.uuid && initialValues.version) }
onBlur={ this.save } onBlur={ this.save }
/> />
<Field <Field required
name="title" name="title"
component={ TextField } basicMarkdown
label="Title of the dataset*" component={ MarkdownField }
label="Title of the dataset"
placeholder="Title" placeholder="Title"
onBlur={ this.save } onBlur={ this.save }
/> />
<Field <Field
name="description" name="description"
component={ MarkdownField } 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." placeholder="An abstract, short or long description of the resource. Descriptive details improves discoverability of the resource."
onBlur={ this.save } onBlur={ this.save }
/> />
......
...@@ -136,7 +136,7 @@ class DescriptorListPage extends React.Component<IDescriptorListPageProps, any> ...@@ -136,7 +136,7 @@ class DescriptorListPage extends React.Component<IDescriptorListPageProps, any>
<Grid item xs={ 12 }> <Grid item xs={ 12 }>
<Card className={ classes.card } square> <Card className={ classes.card } square>
<CardHeader className={ classes.cardHeader } title={ ( <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 /> <Divider />
<CardContent className={ classes.cardContent }> <CardContent className={ classes.cardContent }>
......
...@@ -19,7 +19,7 @@ const DescriptorListForm = ({error, handleSubmit, initialValues, onPublish, part ...@@ -19,7 +19,7 @@ const DescriptorListForm = ({error, handleSubmit, initialValues, onPublish, part
editable={ ! (initialValues.uuid && initialValues.version) } editable={ ! (initialValues.uuid && initialValues.version) }
component={ SelectPartner } partners={ partners } /> component={ SelectPartner } partners={ partners } />
<Field name="crop" label="Crop code" placeholder="maize" component={ TextField } /> <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 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="versionTag" label="Version tag" placeholder="1.0" component={ TextField } />
<Field required name="publisher" label="Publisher" placeholder="" component={ TextField } /> <Field required name="publisher" label="Publisher" placeholder="" component={ TextField } />
......
...@@ -429,6 +429,7 @@ table.genesys-table { ...@@ -429,6 +429,7 @@ table.genesys-table {
} }
} }
} }
// Markdown // Markdown
.markdown { .markdown {
& > :first-child { & > :first-child {
...@@ -454,6 +455,11 @@ table.genesys-table { ...@@ -454,6 +455,11 @@ table.genesys-table {
} }
} }
// Markdown basic: the inlined version
div.markdown-basic {
display: inline-block;
}
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
&:first-child { &:first-child {
margin-top: 0; 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