refactoring formatters for lazy display of scaled image previews (WIP)

src/widgets/lazy-image.jsx

@@ -0,0 +1,26 @@
+// Image with a placeholder which is replaced when the promise is resolved.
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+export default class LazyImage extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      src: 'img/placeholder.png',
+      style: this.props.style,
+      className: this.props.className,
+      loading: 'lazy',
+      alt: this.props.alt,
+      onClick: this.props.onClick,
+    };
+
+    this.props.whenDone
+      .then(data => this.setState({src: data.src}))
+      .catch(() => this.setState({src: 'img/broken_image.png'}));
+  }
+
+  render() {
+    return React.createElement('img', this.state);
+  }
+};

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 } from '../lib/formatters.js';
+import { quoteFormatter, replyFormatter } from '../lib/formatters.js';
 
 const messages = defineMessages({
   messaging_disabled: {
@@ -162,7 +162,7 @@ class SendMessage extends React.PureComponent {
         formatMessage(messages.type_new_message));
 
     const quote = this.props.replyTo ?
-      Drafty.format(this.props.replyTo.content, quoteFormatter, {
+      Drafty.format(this.props.replyTo.content, replyFormatter, {
         formatMessage: formatMessage.bind(this.props.intl),
         authorizeURL: this.props.tinode.authorizeURL.bind(this.props.tinode)
       }) :