Update to Draftail 0.11.0

client/src/components/Draftail/Draftail.scss

@@ -1,9 +1,15 @@
 $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;
-$color-editor-chrome-accent: lighten($color-editor-chrome, 20%);
+$draftail-editor-chrome: $color-grey-1;
+$draftail-editor-chrome-text: $color-white;
+$draftail-editor-chrome-active: $color-white;
+$draftail-editor-chrome-accent: lighten($draftail-editor-chrome, 20%);
+
+$draftail-editor-border: 0;
+$draftail-editor-padding: 0;
+$draftail-toolbar-radius: 5px;
+
+$draftail-editor-font-family: $font-serif;
 
 @import '../../../../node_modules/draft-js/dist/Draft';
 @import '../../../../node_modules/draftail/lib/index';
@@ -68,17 +74,6 @@ div[data-block='true'] {
     @include draftail-richtext-styles;
 }
 
-.public-DraftEditor-content,
-.public-DraftEditorPlaceholder-root {
-    padding: 0;
-    font-family: $font-serif;
-}
-
 .Draftail-Editor {
-    border: 0;
     background-color: transparent;
 }
-
-.Draftail-Toolbar {
-    border-radius: 5px;
-}

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

@@ -1,5 +1,12 @@
+$tooltip-spacing: 0.625rem;
 $tooltip-arrow-height: 15px;
 $tooltip-arrow-spacing: 25px;
+$tooltip-radius: $draftail-tooltip-radius;
+
+$tooltip-chrome: $draftail-tooltip-chrome;
+$tooltip-chrome-text: $draftail-tooltip-chrome-text;
+
+$tooltip-z-index: $draftail-tooltip-z-index;
 
 @mixin arrow--top {
     margin-top: $tooltip-arrow-spacing;
@@ -9,7 +16,7 @@ $tooltip-arrow-spacing: 25px;
         bottom: 100%;
         left: 50%;
         transform: translateX(-50%);
-        border-bottom-color: $color-tooltip-chrome;
+        border-bottom-color: $tooltip-chrome;
     }
 }
 
@@ -21,7 +28,7 @@ $tooltip-arrow-spacing: 25px;
         top: 50%;
         right: 100%;
         transform: translateY(-50%);
-        border-right-color: $color-tooltip-chrome;
+        border-right-color: $tooltip-chrome;
     }
 }
 
@@ -31,17 +38,17 @@ $tooltip-arrow-spacing: 25px;
     &::before {
         bottom: 100%;
         left: $tooltip-arrow-spacing;
-        border-bottom-color: $color-tooltip-chrome;
+        border-bottom-color: $tooltip-chrome;
     }
 }
 
 .Tooltip {
     position: absolute;
     padding: $tooltip-spacing;
-    background-color: $color-tooltip-chrome;
-    color: $color-tooltip-chrome-text;
+    background-color: $tooltip-chrome;
+    color: $tooltip-chrome-text;
     z-index: $tooltip-z-index;
-    border-radius: $tooltip-border-radius;
+    border-radius: $tooltip-radius;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
 
     &::before {

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

@@ -13,7 +13,7 @@ const TOOLTIP_MAX_WIDTH = OPTIONS_MAX_WIDTH + OPTIONS_SPACING;
 const propTypes = {
   blockProps: PropTypes.shape({
     entity: PropTypes.object,
-    entityConfig: PropTypes.object.isRequired,
+    entityType: PropTypes.object.isRequired,
   }).isRequired,
   src: PropTypes.string.isRequired,
   alt: PropTypes.string.isRequired,
@@ -73,7 +73,7 @@ class MediaBlock extends Component {
   render() {
     const { blockProps, src, alt } = this.props;
     const { showTooltipAt } = this.state;
-    const { entityConfig } = blockProps;
+    const { entityType } = blockProps;
 
     return (
       <button
@@ -83,7 +83,7 @@ class MediaBlock extends Component {
         onMouseUp={this.openTooltip}
       >
         <span className="MediaBlock__icon-wrapper" aria-hidden>
-          <Icon icon={entityConfig.icon} className="MediaBlock__icon" />
+          <Icon icon={entityType.icon} className="MediaBlock__icon" />
         </span>
 
         <img className="MediaBlock__img" src={src} alt={alt} width="256" />

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

@@ -13,8 +13,8 @@
         position: absolute;
         top: 0;
         right: 0;
-        background: $color-editor-chrome;
-        color: $color-editor-chrome-text;
+        background: $draftail-editor-chrome;
+        color: $draftail-editor-chrome-text;
         line-height: 1;
         padding: $controls-spacing * 2 $controls-spacing * 3;
         pointer-events: none;

client/src/components/Draftail/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import DraftailEditor from 'draftail';
+import { DraftailEditor } from 'draftail';
 
 import Icon from '../Icon/Icon';
 
@@ -68,6 +68,7 @@ export const initEditor = (fieldName, options = {}) => {
       spellCheck={true}
       // If increasing above 4, we will need to add styles for the extra nesting levels.
       maxListNesting={4}
+      stripPastedStyles={false}
       {...options}
       blockTypes={blockTypes}
       inlineStyles={inlineStyles}

package-lock.json

@@ -2655,17 +2655,17 @@
       }
     },
     "draftail": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/draftail/-/draftail-0.10.0.tgz",
-      "integrity": "sha512-/RAS9F77oDKUyi05WZDffr5NHK7bZ2/k5vdLKruXMLwJXGL6XoqbtmW486Tlj/kDQyfAIGb2MwqHKqaiABU2qQ==",
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/draftail/-/draftail-0.11.0.tgz",
+      "integrity": "sha512-YWLv733vw/HtiTJNPx7TQpSY9oDA0UbL7KzmxjYvRtGgUubWtfIO6XHKFudUx4og1d1eSvu91mAN7BrAxZnDeg==",
       "requires": {
-        "draftjs-utils": "0.8.8"
+        "draftjs-filters": "0.3.0"
       }
     },
-    "draftjs-utils": {
-      "version": "0.8.8",
-      "resolved": "https://registry.npmjs.org/draftjs-utils/-/draftjs-utils-0.8.8.tgz",
-      "integrity": "sha1-WDXa7ZX1nT7h+W/cu7mAl3LIZJA="
+    "draftjs-filters": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/draftjs-filters/-/draftjs-filters-0.3.0.tgz",
+      "integrity": "sha512-w1gvZVPa2nvvkYK0HKgWHG0O2Qg81qvs4HSXFZZ8OshiORu2D4JC1iYeJ3PpEIvv4pfx8HGbZdDCc1L69N5WEw=="
     },
     "duplexer": {
       "version": "0.1.1",

package.json

@@ -70,7 +70,7 @@
   },
   "dependencies": {
     "draft-js": "^0.10.4",
-    "draftail": "^0.10.0",
+    "draftail": "^0.11.0",
     "focus-trap-react": "^3.1.0",
     "lodash": "^4.17.4",
     "object-assign": "^4.1.1",