Make all Draftail interface translatable

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

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import { STRINGS } from '../../../config/wagtailConfig';
+
 import MediaBlock from '../blocks/MediaBlock';
 
 const propTypes = {
@@ -17,7 +19,7 @@ const EmbedBlock = props => {
   const { url, title, thumbnail } = entity.getData();
 
   return (
-    <MediaBlock {...props} src={thumbnail} alt={`Embed: ${title}`}>
+    <MediaBlock {...props} src={thumbnail} alt="">
       <a
         className="Tooltip__link EmbedBlock__link"
         href={url}
@@ -29,11 +31,11 @@ const EmbedBlock = props => {
       </a>
 
       <button className="button Tooltip__button" onClick={onEditEntity}>
-        Edit
+        {STRINGS.EDIT}
       </button>
 
       <button className="button button-secondary no Tooltip__button" onClick={onRemoveEntity}>
-        Remove
+        {STRINGS.DELETE}
       </button>
     </MediaBlock>
   );

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

@@ -2,6 +2,8 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { DraftUtils } from 'draftail';
 
+import { STRINGS } from '../../../config/wagtailConfig';
+
 import MediaBlock from '../blocks/MediaBlock';
 
 const propTypes = {
@@ -42,16 +44,16 @@ class ImageBlock extends Component {
     return (
       <MediaBlock {...this.props} src={src} alt="">
         <label className="ImageBlock__field">
-          <p>Alt text</p>
+          <p>{STRINGS.ALT_TEXT}</p>
           <input className="ImageBlock__field__input" type="text" value={alt || ''} onChange={this.changeAlt} />
         </label>
 
         <button className="button Tooltip__button" onClick={onEditEntity}>
-          Edit
+          {STRINGS.EDIT}
         </button>
 
         <button className="button button-secondary no Tooltip__button" onClick={onRemoveEntity}>
-          Remove
+          {STRINGS.DELETE}
         </button>
       </MediaBlock>
     );

client/src/components/Draftail/blocks/__snapshots__/EmbedBlock.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`EmbedBlock renders 1`] = `
 <MediaBlock
-  alt="Embed: Test title"
+  alt=""
   blockProps={
     Object {
       "entity": Object {
@@ -30,7 +30,7 @@ exports[`EmbedBlock renders 1`] = `
   <button
     className="button button-secondary no Tooltip__button"
   >
-    Remove
+    Delete
   </button>
 </MediaBlock>
 `;

client/src/components/Draftail/blocks/__snapshots__/ImageBlock.test.js.snap

@@ -37,7 +37,7 @@ exports[`ImageBlock alt 1`] = `
   <button
     className="button button-secondary no Tooltip__button"
   >
-    Remove
+    Delete
   </button>
 </MediaBlock>
 `;
@@ -79,7 +79,7 @@ exports[`ImageBlock renders 1`] = `
   <button
     className="button button-secondary no Tooltip__button"
   >
-    Remove
+    Delete
   </button>
 </MediaBlock>
 `;

client/src/components/Draftail/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { DraftailEditor } from 'draftail';
 
-import { IS_IE11 } from '../../config/wagtailConfig';
+import { IS_IE11, STRINGS } from '../../config/wagtailConfig';
 
 import Icon from '../Icon/Icon';
 
@@ -70,7 +70,7 @@ export const initEditor = (fieldName, options = {}) => {
     <DraftailEditor
       rawContentState={rawContentState}
       onSave={serialiseInputValue}
-      placeholder="Write here…"
+      placeholder={STRINGS.WRITE_HERE}
       spellCheck={true}
       // If increasing above 4, we will need to add styles for the extra nesting levels.
       maxListNesting={4}

client/tests/stubs.js

@@ -20,14 +20,17 @@ global.wagtailConfig = {
   },
   STRINGS: {
     EDIT: 'Edit',
+    DELETE: 'Delete',
     PAGE: 'Page',
     PAGES: 'Pages',
     LOADING: 'Loading...',
-    SERVER_ERROR: 'Server Error',
     NO_RESULTS: 'No results',
+    SERVER_ERROR: 'Server Error',
     SEE_CHILDREN: 'See children',
     SEE_ALL: 'See all',
     CLOSE_EXPLORER: 'Close explorer',
+    ALT_TEXT: 'Alt text',
+    WRITE_HERE: 'Write here…',
   },
 };
 

wagtail/admin/templates/wagtailadmin/admin_base.html

@@ -29,6 +29,7 @@
 
             wagtailConfig.STRINGS = {
                 EDIT: "{% trans 'Edit' %}",
+                DELETE: "{% trans 'Delete' %}",
                 PAGE: "{% trans 'Page' %}",
                 PAGES: "{% trans 'Pages' %}",
                 LOADING: "{% trans 'Loading...' %}",
@@ -37,6 +38,8 @@
                 SEE_CHILDREN: "{% trans 'See children' %}",
                 SEE_ALL: "{% trans 'See all' %}",
                 CLOSE_EXPLORER: "{% trans 'Close explorer' %}",
+                ALT_TEXT: "{% trans 'Alt text' %}",
+                WRITE_HERE: "{% trans 'Write here…' %}",
             };
 
             wagtailConfig.ADMIN_URLS = {

wagtail/admin/wagtail_hooks.py

@@ -272,7 +272,11 @@ def register_core_features(features):
     })
 
     features.register_editor_plugin(
-        'draftail', 'h1', draftail_features.BlockFeature({'label': 'H1', 'type': BLOCK_TYPES.HEADER_ONE})
+        'draftail', 'h1', draftail_features.BlockFeature({
+            'label': 'H1',
+            'type': BLOCK_TYPES.HEADER_ONE,
+            'description': str(_('Heading {level}').format(level=1)),
+        })
     )
     features.register_converter_rule('contentstate', 'h1', {
         'from_database_format': {
@@ -283,7 +287,11 @@ def register_core_features(features):
         }
     })
     features.register_editor_plugin(
-        'draftail', 'h2', draftail_features.BlockFeature({'label': 'H2', 'type': BLOCK_TYPES.HEADER_TWO})
+        'draftail', 'h2', draftail_features.BlockFeature({
+            'label': 'H2',
+            'type': BLOCK_TYPES.HEADER_TWO,
+            'description': str(_('Heading {level}').format(level=2)),
+        })
     )
     features.register_converter_rule('contentstate', 'h2', {
         'from_database_format': {
@@ -294,7 +302,11 @@ def register_core_features(features):
         }
     })
     features.register_editor_plugin(
-        'draftail', 'h3', draftail_features.BlockFeature({'label': 'H3', 'type': BLOCK_TYPES.HEADER_THREE})
+        'draftail', 'h3', draftail_features.BlockFeature({
+            'label': 'H3',
+            'type': BLOCK_TYPES.HEADER_THREE,
+            'description': str(_('Heading {level}').format(level=3)),
+        })
     )
     features.register_converter_rule('contentstate', 'h3', {
         'from_database_format': {
@@ -305,7 +317,11 @@ def register_core_features(features):
         }
     })
     features.register_editor_plugin(
-        'draftail', 'h4', draftail_features.BlockFeature({'label': 'H4', 'type': BLOCK_TYPES.HEADER_FOUR})
+        'draftail', 'h4', draftail_features.BlockFeature({
+            'label': 'H4',
+            'type': BLOCK_TYPES.HEADER_FOUR,
+            'description': str(_('Heading {level}').format(level=4)),
+        })
     )
     features.register_converter_rule('contentstate', 'h4', {
         'from_database_format': {
@@ -316,7 +332,11 @@ def register_core_features(features):
         }
     })
     features.register_editor_plugin(
-        'draftail', 'h5', draftail_features.BlockFeature({'label': 'H5', 'type': BLOCK_TYPES.HEADER_FIVE})
+        'draftail', 'h5', draftail_features.BlockFeature({
+            'label': 'H5',
+            'type': BLOCK_TYPES.HEADER_FIVE,
+            'description': str(_('Heading {level}').format(level=5)),
+        })
     )
     features.register_converter_rule('contentstate', 'h5', {
         'from_database_format': {
@@ -327,7 +347,11 @@ def register_core_features(features):
         }
     })
     features.register_editor_plugin(
-        'draftail', 'h6', draftail_features.BlockFeature({'label': 'H6', 'type': BLOCK_TYPES.HEADER_SIX})
+        'draftail', 'h6', draftail_features.BlockFeature({
+            'label': 'H6',
+            'type': BLOCK_TYPES.HEADER_SIX,
+            'description': str(_('Heading {level}').format(level=6)),
+        })
     )
     features.register_converter_rule('contentstate', 'h6', {
         'from_database_format': {
@@ -339,7 +363,9 @@ def register_core_features(features):
     })
     features.register_editor_plugin(
         'draftail', 'ul', draftail_features.BlockFeature({
-            'type': BLOCK_TYPES.UNORDERED_LIST_ITEM, 'icon': 'list-ul'
+            'type': BLOCK_TYPES.UNORDERED_LIST_ITEM,
+            'icon': 'list-ul',
+            'description': str(_('Bulleted list')),
         })
     )
     features.register_converter_rule('contentstate', 'ul', {
@@ -353,7 +379,9 @@ def register_core_features(features):
     })
     features.register_editor_plugin(
         'draftail', 'ol', draftail_features.BlockFeature({
-            'type': BLOCK_TYPES.ORDERED_LIST_ITEM, 'icon': 'list-ol'
+            'type': BLOCK_TYPES.ORDERED_LIST_ITEM,
+            'icon': 'list-ol',
+            'description': str(_('Numbered list')),
         })
     )
     features.register_converter_rule('contentstate', 'ol', {
@@ -368,7 +396,9 @@ def register_core_features(features):
 
     features.register_editor_plugin(
         'draftail', 'bold', draftail_features.InlineStyleFeature({
-            'type': INLINE_STYLES.BOLD, 'icon': 'bold'
+            'type': INLINE_STYLES.BOLD,
+            'icon': 'bold',
+            'description': str(_('Bold')),
         })
     )
     features.register_converter_rule('contentstate', 'bold', {
@@ -382,7 +412,9 @@ def register_core_features(features):
     })
     features.register_editor_plugin(
         'draftail', 'italic', draftail_features.InlineStyleFeature({
-            'type': INLINE_STYLES.ITALIC, 'icon': 'italic'
+            'type': INLINE_STYLES.ITALIC,
+            'icon': 'italic',
+            'description': str(_('Italic')),
         })
     )
     features.register_converter_rule('contentstate', 'italic', {
@@ -399,6 +431,7 @@ def register_core_features(features):
         'draftail', 'link', draftail_features.EntityFeature({
             'type': ENTITY_TYPES.LINK,
             'icon': 'link',
+            'description': str(_('Link')),
             'source': 'LinkSource',
             'decorator': 'Link',
             # We want to enforce constraints on which links can be pasted into rich text.

wagtail/documents/wagtail_hooks.py

@@ -91,7 +91,7 @@ def register_document_feature(features):
         'draftail', 'document-link', draftail_features.EntityFeature({
             'type': ENTITY_TYPES.DOCUMENT,
             'icon': 'doc-full',
-            'description': 'Document',
+            'description': str(_('Document')),
             'source': 'DocumentSource',
             'decorator': 'Document',
         })

wagtail/embeds/wagtail_hooks.py

@@ -1,6 +1,7 @@
 from django.conf.urls import include, url
 from django.urls import reverse
 from django.utils.html import format_html
+from django.utils.translation import ugettext_lazy as _
 
 from draftjs_exporter.constants import ENTITY_TYPES
 
@@ -55,7 +56,7 @@ def register_embed_feature(features):
         'draftail', 'embed', draftail_features.EntityFeature({
             'type': ENTITY_TYPES.EMBED,
             'icon': 'media',
-            'description': 'Embed',
+            'description': str(_('Embed')),
             'source': 'EmbedSource',
             'block': 'EmbedBlock',
         })

wagtail/images/wagtail_hooks.py

@@ -91,6 +91,7 @@ def register_image_feature(features):
         'draftail', 'image', draftail_features.EntityFeature({
             'type': ENTITY_TYPES.IMAGE,
             'icon': 'image',
+            'description': str(_('Image')),
             'source': 'ImageSource',
             'block': 'ImageBlock',
             # We do not want users to be able to copy-paste hotlinked images into rich text.