Tweak Draftail controls to align better with Wagtail

client/src/components/Draftail/Draftail.scss

@@ -1,3 +1,5 @@
+$editor-z-index: $draftail-editor-z-index;
+
 $color-editor-chrome: $color-grey-1;
 $color-editor-chrome-text: $color-white;
 $color-editor-chrome-active: $color-white;
@@ -74,7 +76,7 @@ div[data-block='true'] {
 
 .Draftail-Editor {
     border: 0;
-    background-color: initial;
+    background-color: transparent;
 }
 
 .Draftail-Toolbar {

client/src/components/Draftail/Tooltip/Tooltip.scss

@@ -42,6 +42,7 @@ $tooltip-arrow-spacing: 25px;
     color: $color-tooltip-chrome-text;
     z-index: $tooltip-z-index;
     border-radius: $tooltip-border-radius;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
 
     &::before {
         content: '';
@@ -63,18 +64,18 @@ $tooltip-arrow-spacing: 25px;
 }
 
 .Tooltip__link {
+    font-size: 0.875rem;
     margin-right: $controls-spacing * 4;
     display: inline-block;
+
+    &,
+    &:hover {
+        color: $color-white;
+    }
 }
 
 .Tooltip__button {
-    appearance: none;
-    background: #808080;
-    color: $color-white;
     padding: $button-spacing $controls-spacing;
-    border: 0;
-    border-radius: 1px;
-    cursor: pointer;
 
     + .Tooltip__button {
         margin-left: $button-spacing;

client/src/components/Draftail/blocks/EmbedBlock.js

@@ -19,7 +19,7 @@ const EmbedBlock = props => {
   return (
     <MediaBlock {...props} src={thumbnail} alt={`Embed: ${title}`}>
       <a
-        className="EmbedBlock__link"
+        className="Tooltip__link EmbedBlock__link"
         href={url}
         title={url}
         target="_blank"
@@ -28,11 +28,11 @@ const EmbedBlock = props => {
         {title}
       </a>
 
-      <button className="Tooltip__button" onClick={onEditEntity}>
+      <button className="button Tooltip__button" onClick={onEditEntity}>
         Edit
       </button>
 
-      <button className="Tooltip__button" onClick={onRemoveEntity}>
+      <button className="button button-secondary no Tooltip__button" onClick={onRemoveEntity}>
         Remove
       </button>
     </MediaBlock>

client/src/components/Draftail/blocks/ImageBlock.js

@@ -43,13 +43,14 @@ class ImageBlock extends Component {
       <MediaBlock {...this.props} src={src} alt="">
         <label className="ImageBlock__field">
           <p>Alt text</p>
-          <input type="text" value={alt || ''} onChange={this.changeAlt} />
+          <input className="ImageBlock__field__input" type="text" value={alt || ''} onChange={this.changeAlt} />
         </label>
-        <button className="Tooltip__button" onClick={onEditEntity}>
+
+        <button className="button Tooltip__button" onClick={onEditEntity}>
           Edit
         </button>
 
-        <button className="Tooltip__button" onClick={onRemoveEntity}>
+        <button className="button button-secondary no Tooltip__button" onClick={onRemoveEntity}>
           Remove
         </button>
       </MediaBlock>

client/src/components/Draftail/blocks/ImageBlock.scss

@@ -1,10 +1,25 @@
-.ImageBlock__field {
-    display: block;
-    cursor: pointer;
-    margin-bottom: $button-spacing;
-
-    > [type='text'] {
-        background-color: $color-white;
-        color: $color-text-base;
-    }
+@mixin wagtail-label-overrides {
+    float: none;
+    width: initial;
+    padding: 0;
+}
+
+.ImageBlock__field {
+    @include wagtail-label-overrides;
+    display: block;
+    margin-bottom: $button-spacing * 2;
+    color: $color-white;
+    cursor: pointer;
+}
+
+@mixin wagtail-input-overrides {
+    border: 0;
+    font-size: inherit;
+}
+
+.ImageBlock__field__input {
+    @include wagtail-input-overrides;
+    font-size: 1rem;
+    background-color: $color-white;
+    color: $color-text-base;
 }

client/src/components/Draftail/decorators/Document.js

@@ -12,7 +12,8 @@ const Document = props => {
     <TooltipEntity
       {...props}
       icon={<Icon name="doc-full" />}
-      label={url.replace(/(^\w+:|^)\/\//, '').split('/')[0]}
+      label={url}
+      url={url}
     />
   );
 };

client/src/components/Draftail/decorators/Link.js

@@ -5,16 +5,41 @@ import Icon from '../../Icon/Icon';
 
 import TooltipEntity from '../decorators/TooltipEntity';
 
+const getEmailAddress = mailto => mailto.replace('mailto:', '').split('?')[0];
+const getDomainName = url => url.replace(/(^\w+:|^)\/\//, '').split('/')[0];
+
 const Link = props => {
   const { entityKey, contentState } = props;
-  const { url } = contentState.getEntity(entityKey).getData();
-  const icon = url.startsWith('mailto:') ? 'mail' : 'link';
+  const { linkType, url } = contentState.getEntity(entityKey).getData();
+  let icon;
+  let label;
+  let tooltipURL;
+
+  switch (linkType) {
+  case 'email':
+    icon = 'mail';
+    tooltipURL = getEmailAddress(url);
+    label = url;
+    break;
+  case 'page':
+    icon = 'link';
+    tooltipURL = url;
+    label = url;
+    break;
+  case 'external':
+  default:
+    icon = 'link';
+    tooltipURL = url;
+    label = getDomainName(url);
+    break;
+  }
 
   return (
     <TooltipEntity
       {...props}
       icon={<Icon name={icon} />}
-      label={url.replace(/(^\w+:|^)\/\//, '').split('/')[0]}
+      label={label}
+      url={tooltipURL}
     />
   );
 };

client/src/components/Draftail/decorators/TooltipEntity.js

@@ -29,15 +29,14 @@ class TooltipEntity extends Component {
   render() {
     const {
       entityKey,
-      contentState,
       children,
       onEdit,
       onRemove,
       icon,
       label,
+      url,
     } = this.props;
     const { showTooltipAt } = this.state;
-    const { url } = contentState.getEntity(entityKey).getData();
 
     // Contrary to what JSX A11Y says, this should be a button but it shouldn't be focusable.
     /* eslint-disable springload/jsx-a11y/interactive-supports-focus */
@@ -64,14 +63,14 @@ class TooltipEntity extends Component {
               </a>
 
               <button
-                className="Tooltip__button"
+                className="button Tooltip__button"
                 onClick={onEdit.bind(null, entityKey)}
               >
                 Edit
               </button>
 
               <button
-                className="Tooltip__button"
+                className="button button-secondary no Tooltip__button"
                 onClick={onRemove.bind(null, entityKey)}
               >
                 Remove
@@ -86,7 +85,6 @@ class TooltipEntity extends Component {
 
 TooltipEntity.propTypes = {
   entityKey: PropTypes.string.isRequired,
-  contentState: PropTypes.object.isRequired,
   children: PropTypes.node.isRequired,
   onEdit: PropTypes.func.isRequired,
   onRemove: PropTypes.func.isRequired,
@@ -95,6 +93,7 @@ TooltipEntity.propTypes = {
     PropTypes.object.isRequired,
   ]).isRequired,
   label: PropTypes.string.isRequired,
+  url: PropTypes.string.isRequired,
 };
 
 export default TooltipEntity;

client/src/components/Draftail/decorators/TooltipEntity.scss

@@ -1,8 +1,10 @@
 .TooltipEntity {
-    background: $color-light-blue;
-    border-bottom: 1px dotted $color-teal;
     cursor: pointer;
 
+    &:hover {
+        color: $color-teal;
+    }
+
     &__icon {
         color: $color-teal;
         margin-right: 0.2em;

wagtail/admin/static_src/wagtailadmin/scss/_variables.scss

@@ -82,3 +82,6 @@ $thumbnail-width: 130px;
 $menu-width: 180px;
 $menu-width-max: 320px;
 $mobile-nav-indent: 50px;
+
+$nav-wrapper-inner-z-index: 26;
+$draftail-editor-z-index: $nav-wrapper-inner-z-index + 1;

wagtail/admin/static_src/wagtailadmin/scss/components/_main-nav.scss

@@ -259,7 +259,7 @@ body.explorer-open {
             height: 100%;
             position: fixed;
             width: $menu-width;
-            z-index: 26;
+            z-index: $nav-wrapper-inner-z-index;
         }
     }