More code review suggestions.

src/lib/formatters.js

@@ -393,22 +393,3 @@ export function replyFormatter(style, data, values, key) {
   values = [React.createElement(LazyImage, attr, null), ' ', attr.alt];
   return React.createElement(React.Fragment, {key: key}, values);
 }
-
-// Creates a "forward" icon fragment.
-export function forwardedDecorator(context) {
-  return [<i key="fwd" className="material-icons">forward</i>];
-}
-
-// Returns a fully decorated ready for rendering representation of a drafty object.
-export function formatDrafty(content, formatter, context, decorators) {
-  let tree = Drafty.format(content, formatter, context);
-  if (decorators) {
-    if (decorators.before) {
-      tree = decorators.before(context).concat(tree);
-    }
-    if (decorators.after) {
-      tree = tree.concat(decorators.after(context));
-    }
-  }
-  return tree;
-}

src/views/messages-view.jsx

@@ -843,16 +843,17 @@ class MessagesView extends React.Component {
     uploader.cancel();
   }
 
-  handlePickReply(seq, content, senderId, senderName) {
+  handlePickReply(seq, content, forwarded, senderId, senderName) {
     this.setState({reply: null});
 
     if (!seq || !content) {
       return;
     }
 
-    if (typeof content == 'string') {
-      content = Drafty.init(content);
-    }
+    content = forwarded ?
+        Drafty.forwardedContent(content) :
+        typeof content == 'string' ?
+            Drafty.init(content) : content;
     if (Drafty.isValid(content)) {
       content = Drafty.preview(content, QUOTED_REPLY_LENGTH);
     } else {

src/views/tinode-web.jsx

@@ -1450,8 +1450,12 @@ class TinodeWeb extends React.Component {
       // If the Find panel is active, close it.
       this.handleSidepanelCancel();
     }
-    const header = params.userName;
-    const content = typeof params.content == 'string' ? Tinode.Drafty.init(params.content) : params.content;
+    const header = '➦ ' + params.userName;
+    const content = params.forwarded ?
+        Tinode.Drafty.forwardedContent(params.content) :
+        typeof params.content == 'string' ?
+            Tinode.Drafty.init(params.content) : params.content;
+    //const content = typeof params.content == 'string' ? Tinode.Drafty.init(params.content) : params.content;
     const preview = Tinode.Drafty.preview(content, 30);
     const msg = Tinode.Drafty.append(
         Tinode.Drafty.appendLineBreak(

src/widgets/chat-message.jsx

@@ -7,7 +7,7 @@ import Attachment from './attachment.jsx';
 import LetterTile from './letter-tile.jsx';
 import ReceivedMarker from './received-marker.jsx'
 
-import { fullFormatter, quoteFormatter, formatDrafty, forwardedDecorator } from '../lib/formatters.js';
+import { fullFormatter, quoteFormatter } from '../lib/formatters.js';
 import { sanitizeImageUrl, sanitizeUrl } from '../lib/utils.js';
 
 class BaseChatMessage extends React.PureComponent {
@@ -83,6 +83,7 @@ class BaseChatMessage extends React.PureComponent {
       content: this.props.content,
       userFrom: this.props.userFrom,
       userName: this.props.userName,
+      forwarded: this.props.forwarded,
       y: e.pageY,
       x: e.pageX,
       pickReply: this.props.pickReply
@@ -135,8 +136,7 @@ class BaseChatMessage extends React.PureComponent {
           onError={this.props.onError}
           key={i} />);
       }, this);
-      const tree = formatDrafty(content, fullFormatter, this.formatterContext,
-                                this.props.forwarded ? { before: forwardedDecorator } : null);
+      const tree = Drafty.format(content, fullFormatter, this.formatterContext);
       content = React.createElement(React.Fragment, null, tree);
     } else if (this.props.deleted) {
       // Message represents a range of deleted messages.

src/widgets/contact.jsx

@@ -9,7 +9,7 @@ import UnreadBadge from './unread-badge.jsx';
 
 import { Drafty } from 'tinode-sdk';
 
-import { previewFormatter, formatDrafty, forwardedDecorator } from '../lib/formatters.js';
+import { previewFormatter } from '../lib/formatters.js';
 import { deliveryMarker } from '../lib/utils.js';
 
 class Contact extends React.Component {
@@ -72,8 +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, formatDrafty(this.props.preview, previewFormatter,
-          {formatMessage: this.props.intl.formatMessage}, this.props.forwarded ? { before: forwardedDecorator } : null)) :
+        React.createElement(React.Fragment, null, Drafty.format(this.props.preview, previewFormatter,
+          {formatMessage: this.props.intl.formatMessage})) :
         <><i className="material-icons gray">warning_amber</i> <i className="gray">
           <FormattedMessage id="invalid_content"
             defaultMessage="invalid content" description="Shown when the message is unreadable" /></i>

src/widgets/context-menu.jsx

@@ -440,7 +440,7 @@ class ContextMenu extends React.Component {
   }
 
   replyToMessage(params, errorHandler) {
-    params.pickReply(params.seq, params.content, params.userFrom, params.userName, errorHandler);
+    params.pickReply(params.seq, params.content, params.forwarded, params.userFrom, params.userName, errorHandler);
   }
 
   forwardMessage(params, errorHandler) {

src/widgets/send-message.jsx

@@ -5,7 +5,7 @@ import { Drafty } from 'tinode-sdk';
 
 import { KEYPRESS_DELAY } from '../config.js';
 import { filePasted } from '../lib/blob-helpers.js';
-import { quoteFormatter, replyFormatter, formatDrafty, forwardedDecorator } from '../lib/formatters.js';
+import { quoteFormatter, replyFormatter } from '../lib/formatters.js';
 
 const messages = defineMessages({
   messaging_disabled: {
@@ -61,11 +61,10 @@ class SendMessage extends React.PureComponent {
     }
 
     this.setState({quote: this.props.replyTo ?
-      formatDrafty(this.props.replyTo.content, replyFormatter, {
+      Drafty.format(this.props.replyTo.content, replyFormatter, {
         formatMessage: this.props.intl.formatMessage.bind(this.props.intl),
         authorizeURL: this.props.tinode.authorizeURL.bind(this.props.tinode)
-      },
-      this.props.replyTo.forwarded ? { before: forwardedDecorator } : null) :
+      }) :
       null});
   }
 
@@ -82,11 +81,10 @@ class SendMessage extends React.PureComponent {
 
     if (prevProps.replyTo != this.props.replyTo) {
       this.setState({quote: this.props.replyTo ?
-        formatDrafty(this.props.replyTo.content, replyFormatter, {
+        Drafty.format(this.props.replyTo.content, replyFormatter, {
           formatMessage: this.props.intl.formatMessage.bind(this.props.intl),
           authorizeURL: this.props.tinode.authorizeURL.bind(this.props.tinode)
-        },
-        this.props.replyTo.forwarded ? { before: forwardedDecorator } : null) :
+        }) :
         null});
     }
   }