evrithing seems to work now

src/config.js

@@ -79,7 +79,7 @@ export const MAX_IMAGE_DIM = 1024;
 export const IMAGE_PREVIEW_DIM = 64;
 
 // Linear dimensions of image thumbnail: shrink image under this size for thumbnails in reply quote previews.
-export const IMAGE_THUMBNAIL_DIM = 25;
+export const IMAGE_THUMBNAIL_DIM = 36;
 
 // Maximum number of online users to be shown in a topic title bar. Others will be
 // hidden under "+X more"

src/i18n/de.json

@@ -429,7 +429,7 @@
   "invalid_content": {
     "translation": "ungültiger Inhalt",
     "defaultMessage": "invalid content",
-    "description": "Shown when message is unreadable",
+    "description": "Shown when the message is unreadable",
     "missing": false,
     "obsolete": false
   },

src/i18n/en.json

@@ -436,7 +436,7 @@
   "invalid_content": {
     "translation": "invalid content",
     "defaultMessage": "invalid content",
-    "description": "Shown when message is unreadable",
+    "description": "Shown when the message is unreadable",
     "missing": false,
     "obsolete": false
   },

src/i18n/es.json

@@ -429,7 +429,7 @@
   "invalid_content": {
     "translation": "contenido inválido",
     "defaultMessage": "invalid content",
-    "description": "Shown when message is unreadable",
+    "description": "Shown when the message is unreadable",
     "missing": false,
     "obsolete": false
   },

src/i18n/ex/base-en.json

@@ -253,7 +253,7 @@
   },
   "invalid_content": {
     "defaultMessage": "invalid content",
-    "description": "Shown when message is unreadable"
+    "description": "Shown when the message is unreadable"
   },
   "invalid_security_token": {
     "defaultMessage": "Invalid security token",

src/i18n/ko.json

@@ -429,7 +429,7 @@
   "invalid_content": {
     "translation": "잘못된내용",
     "defaultMessage": "invalid content",
-    "description": "Shown when message is unreadable",
+    "description": "Shown when the message is unreadable",
     "missing": false,
     "obsolete": false
   },

src/i18n/ro.json

@@ -429,7 +429,7 @@
   "invalid_content": {
     "translation": "conținut invalid",
     "defaultMessage": "invalid content",
-    "description": "Shown when message is unreadable",
+    "description": "Shown when the message is unreadable",
     "missing": false,
     "obsolete": false
   },

src/i18n/ru.json

@@ -429,7 +429,7 @@
   "invalid_content": {
     "translation": "сообщение не читается",
     "defaultMessage": "invalid content",
-    "description": "Shown when message is unreadable",
+    "description": "Shown when the message is unreadable",
     "missing": false,
     "obsolete": false
   },

src/i18n/zh-TW.json

@@ -429,7 +429,7 @@
   "invalid_content": {
     "translation": "內容無效",
     "defaultMessage": "invalid content",
-    "description": "Shown when message is unreadable",
+    "description": "Shown when the message is unreadable",
     "missing": false,
     "obsolete": false
   },

src/i18n/zh.json

@@ -429,7 +429,7 @@
   "invalid_content": {
     "translation": "无效内容",
     "defaultMessage": "invalid content",
-    "description": "Shown when message is unreadable",
+    "description": "Shown when the message is unreadable",
     "missing": false,
     "obsolete": false
   },

src/lib/formatters.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages } from 'react-intl';
 
 import { IMAGE_THUMBNAIL_DIM, BROKEN_IMAGE_SIZE, REM_SIZE } from '../config.js';
 import { fitImageSize } from './blob-helpers.js';
@@ -30,20 +30,20 @@ function handleImageData(el, data, attr) {
   if (!data) {
     attr.src = 'img/broken_image.png';
     attr.style = {
-      width: BROKEN_IMAGE_SIZE + 'px',
-      height: BROKEN_IMAGE_SIZE + 'px',
+      width: IMAGE_THUMBNAIL_DIM + 'px',
+      height: IMAGE_THUMBNAIL_DIM + 'px',
       // Looks like a Chrome bug: broken image does not respect 'width' and 'height'.
-      minWidth: BROKEN_IMAGE_SIZE + 'px',
-      minHeight: BROKEN_IMAGE_SIZE + 'px'
+      minWidth: IMAGE_THUMBNAIL_DIM + 'px',
+      minHeight: IMAGE_THUMBNAIL_DIM + 'px'
     };
     return el;
   }
 
   attr.className = 'inline-image';
   const dim = fitImageSize(data.width, data.height,
-    this.viewportWidth > 0 ?
-      Math.min(this.viewportWidth - REM_SIZE * 6.5, REM_SIZE * 34.5) : REM_SIZE * 34.5,
-        REM_SIZE * 24, false) || {dstWidth: BROKEN_IMAGE_SIZE, dstHeight: BROKEN_IMAGE_SIZE};
+    this.viewportWidth > 0 ? Math.min(this.viewportWidth - REM_SIZE * 6.5, REM_SIZE * 34.5) :
+      REM_SIZE * 34.5, REM_SIZE * 24, false) ||
+      {dstWidth: BROKEN_IMAGE_SIZE, dstHeight: BROKEN_IMAGE_SIZE};
   attr.style = {
     width: dim.dstWidth + 'px',
     height: dim.dstHeight + 'px',
@@ -147,6 +147,7 @@ export function fullFormatter(style, data, values, key) {
 // Converts Drafty object into a one-line preview. 'this' is set by the caller.
 // 'this' must contain:
 //    formatMessage: this.props.intl.formatMessage
+//    messages: formatjs messages defined with defineMessages.
 export function previewFormatter(style, data, values, key) {
   let el = Drafty.tagName(style);
   const attr = { key: key };
@@ -184,9 +185,13 @@ export function previewFormatter(style, data, values, key) {
         el = React.Fragment;
         break;
       case 'EX':
-        if (data && data.mime == 'application/json') {
-          // Ignore JSON attachments: they are form response payloads.
-          return null;
+        if (data) {
+          if (data.mime == 'application/json') {
+            // Ignore JSON attachments: they are form response payloads.
+            return null;
+          }
+          // Clear inband data.
+          data.val = null;
         }
         el = React.Fragment;
         values = [<i key="ex" className="material-icons">attachment</i>, this.formatMessage(messages.drafty_attachment)];
@@ -207,17 +212,20 @@ export function previewFormatter(style, data, values, key) {
 // Converts Drafty object into a quoted reply. 'this' is set by the caller.
 // 'this' must contain:
 //    formatMessage: this.props.intl.formatMessage
+//    messages: formatjs messages defined with defineMessages.
 //    authorizeURL: this.props.tinode.authorizeURL
 //    onQuoteClick: this.handleQuoteClick (optional)
 export function quoteFormatter(style, data, values, key) {
   if (['BR', 'IM', 'MN', 'QQ'].includes(style)) {
     let el = Drafty.tagName(style);
-    const attr = Drafty.attrValue(style, data) || {};
+    let attr = Drafty.attrValue(style, data) || {};
     attr.key = key;
     switch(style) {
       case 'IM':
-        el = handleImageData.call(this, el, data, attr);
-        values = null;
+        const img = handleImageData.call(this, el, data, attr);
+        values = [React.createElement(img, attr, null), ' ', this.formatMessage(messages.drafty_image)];
+        el = React.Fragment;
+        attr = {key: key};
         break;
       case 'MN':
         el = 'span';

src/views/messages-view.jsx

@@ -71,6 +71,11 @@ const messages = defineMessages({
     defaultMessage: 'Picture',
     description: 'Comment for embedded images in drafty preview'
   },
+  invalid_content: {
+    id: 'invalid_content',
+    defaultMessage: 'invalid content',
+    description: 'Shown when the message is unreadable'
+  },
 });
 
 // Checks if the access permissions are granted but not yet accepted.
@@ -848,6 +853,7 @@ class MessagesView extends React.Component {
 
   handlePickReply(seq, content) {
     this.setState({reply: null});
+
     if (!seq || !content) {
       return;
     }
@@ -855,7 +861,12 @@ class MessagesView extends React.Component {
     if (typeof content == 'string') {
       content = Drafty.init(content);
     }
-    content = Drafty.preview(content, 30);
+    if (Drafty.isValid(content)) {
+      content = Drafty.preview(content, 30);
+    } else {
+      content = Drafty.append(Drafty.init('\u26A0 '),
+        Drafty.wrapInto(this.props.intl.formatMessage(messages.invalid_content), 'EM'));
+    }
 
     // Get the author.
     const topic = this.props.tinode.getTopic(this.state.topic);
@@ -893,6 +904,8 @@ class MessagesView extends React.Component {
           ex.data.name = '';
           ex.data.width = IMAGE_THUMBNAIL_DIM;
           ex.data.height = IMAGE_THUMBNAIL_DIM;
+          ex.data.maxWidth = IMAGE_THUMBNAIL_DIM;
+          ex.data.maxHeight = IMAGE_THUMBNAIL_DIM;
         };
         const scale = (origBlob) => {
           imageScaled(origBlob, IMAGE_THUMBNAIL_DIM, IMAGE_THUMBNAIL_DIM, -1, false,
@@ -949,7 +962,7 @@ class MessagesView extends React.Component {
         // All done. Create a reply quote.
         this.setState({
           reply: {
-            content: Drafty.createQuote(senderName, senderId, content),
+            content: Drafty.quote(senderName, senderId, content),
             seq: seq
           }
         });
@@ -962,14 +975,12 @@ class MessagesView extends React.Component {
 
   handleQuoteClick(replyToSeq) {
     const ref = this.getOrCreateMessageRef(replyToSeq);
-    if (!ref) {
-      return;
-    }
-    const element = ref.current;
-    if (element) {
-      element.scrollIntoView({block: "center", behavior: "smooth"});
-      element.style.backgroundColor = 'rgb(0, 0, 0, 0.4)';
-      setTimeout(() => { element.style.backgroundColor = ''; } , 1000);
+    if (ref && ref.current) {
+      ref.current.scrollIntoView({block: "center", behavior: "smooth"});
+      // ref.current.style.backgroundColor = 'rgb(0, 0, 0, 0.4)';
+      ref.current.classList.add('flash');
+      setTimeout(() => { ref.current.classList.remove('flash') } , 1000);
+      //setTimeout(() => { ref.current.style.backgroundColor = ''; } , 1000);
     } else {
       console.error("Unresolved message ref: seqId", replyToSeq);
     }

src/widgets/chat-message.jsx

@@ -31,8 +31,9 @@ class BaseChatMessage extends React.PureComponent {
 
     this.formatterContext = {
       getFormatter: (tp) => { return tp == 'QQ' ? quoteFormatter : null; },
-      viewportWidth: this.props.viewportWidth,
-      authorizeURL: this.props.tinode.authorizeURL,
+      formatMessage: props.intl.formatMessage,
+      viewportWidth: props.viewportWidth,
+      authorizeURL: props.tinode.authorizeURL,
       onImagePreview: this.handleImagePreview,
       onFormButtonClick: this.handleFormButtonClick,
       onQuoteClick: this.handleQuoteClick
@@ -136,9 +137,9 @@ class BaseChatMessage extends React.PureComponent {
           defaultMessage="content deleted" description="Shown when messages are deleted" />
       </i></>
     } else if (typeof content != 'string') {
-      content = <><i className="material-icons gray">error_outline</i> <i className="gray">
+      content = <><i className="material-icons gray">warning_amber</i> <i className="gray">
         <FormattedMessage id="invalid_content"
-          defaultMessage="invalid content" description="Shown when message is unreadable" /></i></>
+          defaultMessage="invalid content" description="Shown when the message is unreadable" /></i></>
     }
 
     return (

src/widgets/contact.jsx

@@ -74,9 +74,9 @@ class Contact extends React.Component {
         Drafty.isValid(this.props.preview) ?
         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">
+        <><i className="material-icons gray">warning_amber</i> <i className="gray">
           <FormattedMessage id="invalid_content"
-            defaultMessage="invalid content" description="Shown when message is unreadable" /></i>
+            defaultMessage="invalid content" description="Shown when the message is unreadable" /></i>
         </>
       ) :
       this.props.comment;