Add length constraints to tooltip label

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 (
     <TooltipEntity
       {...props}
       icon={<Icon name="doc-full" />}
-      label={url}
+      label={filename}
       url={url}
     />
   );

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={<Icon name={icon} />}
       label={label}
-      url={tooltipURL}
+      url={data.url}
     />
   );
 };

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)}
               </a>
 
               <button