image reply & invalid content fails, otherwise OK

src/widgets/contact.jsx

@@ -1,6 +1,6 @@
 // A single topic or user.
 import React from 'react';
-import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
 
 import ContactBadges from './contact-badges.jsx';
 import LetterTile from './letter-tile.jsx';
@@ -9,26 +9,9 @@ import UnreadBadge from './unread-badge.jsx';
 
 import { Drafty } from 'tinode-sdk';
 
+import { previewFormatter } from '../lib/formatters.js';
 import { deliveryMarker } from '../lib/utils.js';
 
-const messages = defineMessages({
-  drafty_image: {
-    id: 'drafty_image',
-    defaultMessage: 'Picture',
-    description: 'Comment for embedded images in drafty preview'
-  },
-  drafty_form: {
-    id: 'drafty_form',
-    defaultMessage: 'Form: ',
-    description: 'Comment for form in drafty preview'
-  },
-  drafty_attachment: {
-    id: 'drafty_attachment',
-    defaultMessage: 'Attachment',
-    description: 'Comment for attachment in drafty preview'
-  },
-});
-
 class Contact extends React.Component {
   constructor(props) {
     super(props);
@@ -89,7 +72,8 @@ class Contact extends React.Component {
     const subtitle = this.props.preview ?
       (typeof this.props.preview == 'string' ? this.props.preview :
         Drafty.isValid(this.props.preview) ?
-        React.createElement(React.Fragment, null, Drafty.format(this.props.preview, draftyFormatter, this)) :
+        React.createElement(React.Fragment, null, Drafty.format(this.props.preview, previewFormatter,
+          {formatMessage: this.props.intl.formatMessage})) :
         <><i className="material-icons gray">error_outline</i> <i className="gray">
           <FormattedMessage id="invalid_content"
             defaultMessage="invalid content" description="Shown when message is unreadable" /></i>
@@ -134,64 +118,4 @@ class Contact extends React.Component {
   }
 };
 
-
-// Converts Drafty object into a one-line preview.
-function draftyFormatter(style, data, values, key) {
-  let el = Drafty.tagName(style);
-  const attr = { key: key };
-  if (el) {
-    const { formatMessage } = this.props.intl;
-    switch (style) {
-      case 'BR':
-        // Replace new line with a space.
-        el = React.Fragment;
-        values = [' '];
-        break;
-      case 'HL':
-        // Make highlight less prominent in preview.
-        attr.className = 'highlight preview';
-        break;
-      case 'LN':
-      case 'MN':
-        // Disable links in previews.
-        el = 'span';
-        break;
-      case 'IM':
-        // Replace image with '[icon] Image'.
-        el = React.Fragment;
-        values = [<i key="im" className="material-icons">photo</i>, formatMessage(messages.drafty_image)];
-        break;
-      case 'BN':
-        el = 'span';
-        attr.className = 'flat-button faux';
-        break;
-      case 'FM':
-        el = React.Fragment;
-        values = [<i key="fm" className="material-icons">dashboard</i>,
-          formatMessage(messages.drafty_form)].concat(' ', values || []);
-        break;
-      case 'RW':
-        el = React.Fragment;
-        break;
-      case 'EX':
-        if (data && data.mime == 'application/json') {
-          // Ignore JSON attachments: they are form response payloads.
-          return null;
-        }
-        el = React.Fragment;
-        values = [<i key="ex" className="material-icons">attachment</i>, formatMessage(messages.drafty_attachment)];
-        break;
-      default:
-        if (el == '_UNKN') {
-          el = React.Fragment;
-          values = [<i key="unkn" className="material-icons">extension</i>, ' '].concat(values || []);
-        }
-        break;
-    }
-    return React.createElement(el, attr, values);
-  } else {
-    return values;
-  }
-};
-
 export default injectIntl(Contact);