diff --git a/client/src/components/Draftail/decorators/Document.js b/client/src/components/Draftail/decorators/Document.js index 977d890887..e3d5f02590 100644 --- a/client/src/components/Draftail/decorators/Document.js +++ b/client/src/components/Draftail/decorators/Document.js @@ -8,11 +8,13 @@ import TooltipEntity from '../decorators/TooltipEntity'; const Document = props => { const { entityKey, contentState } = props; const { url } = contentState.getEntity(entityKey).getData(); + const filename = url.split('/')[3]; + return ( } - label={url} + label={filename} url={url} /> ); diff --git a/client/src/components/Draftail/decorators/Link.js b/client/src/components/Draftail/decorators/Link.js index 60fe054f35..83eee0f5d3 100644 --- a/client/src/components/Draftail/decorators/Link.js +++ b/client/src/components/Draftail/decorators/Link.js @@ -13,19 +13,15 @@ const Link = props => { const data = contentState.getEntity(entityKey).getData(); let icon; let label; - let tooltipURL; if (data.id) { icon = 'link'; - tooltipURL = data.url; label = data.url; } else if (data.url.startsWith('mailto:')) { icon = 'mail'; - tooltipURL = getEmailAddress(data.url); - label = data.url; + label = getEmailAddress(data.url); } else { icon = 'link'; - tooltipURL = data.url; label = getDomainName(data.url); } @@ -34,7 +30,7 @@ const Link = props => { {...props} icon={} label={label} - url={tooltipURL} + url={data.url} /> ); }; diff --git a/client/src/components/Draftail/decorators/TooltipEntity.js b/client/src/components/Draftail/decorators/TooltipEntity.js index 62256143a5..4acf60723c 100644 --- a/client/src/components/Draftail/decorators/TooltipEntity.js +++ b/client/src/components/Draftail/decorators/TooltipEntity.js @@ -5,6 +5,15 @@ import { Icon } from 'draftail'; import Tooltip from '../Tooltip/Tooltip'; import Portal from '../../Portal/Portal'; +const shortenLabel = (label) => { + let shortened = label; + if (shortened.length > 25) { + shortened = `${shortened.slice(0, 20)}…`; + } + + return shortened; +}; + class TooltipEntity extends Component { constructor(props) { super(props); @@ -59,7 +68,7 @@ class TooltipEntity extends Component { rel="noopener noreferrer" className="Tooltip__link" > - {label} + {shortenLabel(label)}