Update Draftail integration to latest API

client/src/components/Draftail/Draftail.scss

@@ -1,3 +1,4 @@
+@import '../../../../node_modules/draft-js/dist/Draft';
 @import '../../../../node_modules/draftail/dist/draftail';
 
 // Give each block element eg. paragraph some spacing so we don't end up

client/src/components/Draftail/index.js

@@ -2,6 +2,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import DraftailEditor from 'draftail';
 
+import Icon from '../Icon/Icon';
+
 import decorators from './decorators';
 import sources from './sources';
 import registry from './registry';
@@ -16,12 +18,28 @@ export const initEditor = (fieldName, options = {}) => {
     field.value = JSON.stringify(rawContentState || {});
   };
 
+  let blockTypes;
+  let inlineStyles;
+  let entityTypes;
+
+  if (options && options.blockTypes) {
+    blockTypes = options.blockTypes.map(type => Object.assign(type, {
+      icon: <Icon name={type.icon} />,
+    }));
+  }
+
+  if (options && options.inlineStyles) {
+    inlineStyles = options.inlineStyles.map(type => Object.assign(type, {
+      icon: <Icon name={type.icon} />,
+    }));
+  }
+
   if (options && options.entityTypes) {
-    // eslint-disable-next-line no-param-reassign
-    options.entityTypes = options.entityTypes.map(entity => Object.assign(entity, {
-      source: registry.getSource(entity.source),
-      strategy: registry.getStrategy(entity.type) || null,
-      decorator: registry.getDecorator(entity.decorator),
+    entityTypes = options.entityTypes.map(type => Object.assign(type, {
+      icon: <Icon name={type.icon} />,
+      source: registry.getSource(type.source),
+      strategy: registry.getStrategy(type.type) || null,
+      decorator: registry.getDecorator(type.decorator),
     }));
   }
 
@@ -35,6 +53,9 @@ export const initEditor = (fieldName, options = {}) => {
       onSave={serialiseInputValue}
       placeholder="Write here…"
       {...options}
+      blockTypes={blockTypes}
+      inlineStyles={inlineStyles}
+      entityTypes={entityTypes}
     />
   );
 

wagtail/admin/wagtail_hooks.py

@@ -339,7 +339,7 @@ def register_core_features(features):
     })
     features.register_editor_plugin(
         'draftail', 'ul', draftail_features.BlockFeature({
-            'label': 'UL', 'type': BLOCK_TYPES.UNORDERED_LIST_ITEM, 'icon': 'icon-list-ul'
+            'type': BLOCK_TYPES.UNORDERED_LIST_ITEM, 'icon': 'list-ul'
         })
     )
     features.register_converter_rule('contentstate', 'ul', {
@@ -353,7 +353,7 @@ def register_core_features(features):
     })
     features.register_editor_plugin(
         'draftail', 'ol', draftail_features.BlockFeature({
-            'label': 'OL', 'type': BLOCK_TYPES.ORDERED_LIST_ITEM, 'icon': 'icon-list-ol'
+            'type': BLOCK_TYPES.ORDERED_LIST_ITEM, 'icon': 'list-ol'
         })
     )
     features.register_converter_rule('contentstate', 'ol', {
@@ -368,7 +368,7 @@ def register_core_features(features):
 
     features.register_editor_plugin(
         'draftail', 'bold', draftail_features.InlineStyleFeature({
-            'label': 'Bold', 'type': INLINE_STYLES.BOLD, 'icon': 'icon-bold'
+            'type': INLINE_STYLES.BOLD, 'icon': 'bold'
         })
     )
     features.register_converter_rule('contentstate', 'bold', {
@@ -382,7 +382,7 @@ def register_core_features(features):
     })
     features.register_editor_plugin(
         'draftail', 'italic', draftail_features.InlineStyleFeature({
-            'label': 'Italic', 'type': INLINE_STYLES.ITALIC, 'icon': 'icon-italic'
+            'type': INLINE_STYLES.ITALIC, 'icon': 'italic'
         })
     )
     features.register_converter_rule('contentstate', 'italic', {
@@ -397,9 +397,8 @@ def register_core_features(features):
 
     features.register_editor_plugin(
         'draftail', 'link', draftail_features.EntityFeature({
-            'label': 'Link',
             'type': ENTITY_TYPES.LINK,
-            'icon': 'icon-link',
+            'icon': 'link',
             'source': 'LinkSource',
             'decorator': 'Link',
         })

wagtail/documents/wagtail_hooks.py

@@ -89,9 +89,9 @@ def register_document_feature(features):
     )
     features.register_editor_plugin(
         'draftail', 'document-link', draftail_features.EntityFeature({
-            'label': 'Document',
             'type': ENTITY_TYPES.DOCUMENT,
-            'icon': 'icon-doc-full',
+            'icon': 'doc-full',
+            'description': 'Document',
             'source': 'DocumentSource',
             'decorator': 'Document',
         })

wagtail/embeds/wagtail_hooks.py

@@ -53,11 +53,11 @@ def register_embed_feature(features):
     # define a draftail plugin to use when the 'embed' feature is active
     features.register_editor_plugin(
         'draftail', 'embed', draftail_features.EntityFeature({
-            'label': 'Embed',
             'type': ENTITY_TYPES.EMBED,
-            'icon': 'icon-media',
+            'icon': 'media',
+            'description': 'Embed',
             'source': 'EmbedSource',
-            'decorator': 'Embed',
+            'block': 'EmbedBlock',
         })
     )
 

wagtail/images/rich_text.py

@@ -99,12 +99,11 @@ class ImageFeature(EntityFeature):
             format_defs = [get_image_format(f) for f in image_formats]
 
         super().__init__({
-            'label': 'Image',
             'type': ENTITY_TYPES.IMAGE,
-            'icon': 'icon-image',
+            'icon': 'image',
             'imageFormats': [{'label': str(f.label), 'value': f.name} for f in format_defs],
             'source': 'ImageSource',
-            'decorator': 'Image',
+            'block': 'ImageBlock',
         })