merge conflicts resolved

.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
 node_modules
-src/i18n/src/
+src/i18n/srci/
+webapp.code-workspace.code-workspace

README.md

@@ -44,6 +44,7 @@ More translations are welcome. See [instructions](https://github.com/tinode/chat
 
 ## Not done yet
 
+* Voice or video messages, video or audio calling.
 * End-to-End encryption.
 * Emoji support is weak.
 * Mentions, hashtags.

css/base.css

@@ -236,6 +236,7 @@ textarea.inplace-edit {
 
 ::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
+  box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
   background-color: rgba(255,255,255,0.1);
 }
 
@@ -2512,7 +2513,11 @@ ul.tabbar li.active > a {
 }
 
 .chat-box .bubble .reply-quote {
-  margin: -0.25rem -0.75rem 0.35rem -0.75rem;
+  margin: 0.15rem -0.75rem 0.3rem -0.75rem;
+}
+
+.chat-box .bubble .reply-quote:first-child {
+  margin-top: -0.25rem;
 }
 
 .chat-box .left .reply-quote {
@@ -2528,6 +2533,10 @@ ul.tabbar li.active > a {
   margin-bottom: 0.1rem;
 }
 
+.reply-quote img.inline-image::before {
+  content: '';
+}
+
 #reply-quote-preview {
   display: flex;
   align-items: center;
@@ -2560,6 +2569,11 @@ ul.tabbar li.active > a {
   margin-bottom: 0.35rem;
 }
 
+.forwarding-quote {
+  font-size: 200%;
+  line-height: 200%;
+}
+
 .mention {
   font-weight: 500;
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tinode-webapp",
   "description": "Tinode messenger for the web",
-  "version": "0.18.0-beta2",
+  "version": "0.18.0-rc3",
   "repository": {
     "type": "git",
     "url": "https://github.com/tinode/example-react-js.git"
@@ -70,7 +70,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-intl": "^5.20.2",
-    "tinode-sdk": "^0.18.0-beta1"
+    "tinode-sdk": "^0.18.0-rc3"
   },
   "devDependencies": {
     "@babel/core": "^7.14.5",

src/i18n/de.json

@@ -1353,5 +1353,12 @@
     "description": "Contact search prompt when forwarding a message.",
     "missing": false,
     "obsolete": false
+  },
+  "label_new_password": {
+    "translation": "Neues Kennwort",
+    "defaultMessage": "New password",
+    "description": "Label for entering a new password",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/en.json

@@ -34,13 +34,6 @@
     "missing": false,
     "obsolete": false
   },
-  "action_more": {
-    "translation": "More",
-    "defaultMessage": "More",
-    "description": "Action for showing more content",
-    "missing": false,
-    "obsolete": true
-  },
   "action_report_chat": {
     "translation": "Report Conversation",
     "defaultMessage": "Report Conversation",
@@ -461,13 +454,6 @@
     "missing": false,
     "obsolete": false
   },
-  "label_default_access": {
-    "translation": "Default access mode:",
-    "defaultMessage": "Default access mode:",
-    "description": "Section title",
-    "missing": false,
-    "obsolete": true
-  },
   "label_default_access_mode": {
     "translation": "Default access mode:",
     "defaultMessage": "Default access mode:",
@@ -1033,13 +1019,6 @@
     "missing": false,
     "obsolete": false
   },
-  "sidepanel_title_acc_general": {
-    "translation": "General",
-    "defaultMessage": "General",
-    "description": "Sidepanel title for TopicCommonView.",
-    "missing": false,
-    "obsolete": true
-  },
   "sidepanel_title_acc_notifications": {
     "translation": "Notifications",
     "defaultMessage": "Notifications",
@@ -1047,13 +1026,6 @@
     "missing": false,
     "obsolete": false
   },
-  "sidepanel_title_acc_security": {
-    "translation": "Security",
-    "defaultMessage": "Security",
-    "description": "Sidepanel title for AccSecurityView.",
-    "missing": false,
-    "obsolete": true
-  },
   "sidepanel_title_acc_support": {
     "translation": "Support",
     "defaultMessage": "Support",
@@ -1089,13 +1061,6 @@
     "missing": false,
     "obsolete": false
   },
-  "sidepanel_title_crop": {
-    "translation": "Drag to Adjust",
-    "defaultMessage": "Drag to Adjust",
-    "description": "Sidepanel title for AvatarCropView.",
-    "missing": false,
-    "obsolete": true
-  },
   "sidepanel_title_login": {
     "translation": "Sign In",
     "defaultMessage": "Sign In",
@@ -1187,13 +1152,6 @@
     "missing": false,
     "obsolete": false
   },
-  "title_info": {
-    "translation": "Info",
-    "defaultMessage": "Info",
-    "description": "Title for InfoView",
-    "missing": false,
-    "obsolete": true
-  },
   "title_manage_tags": {
     "translation": "Manage",
     "defaultMessage": "Manage",
@@ -1299,20 +1257,6 @@
     "missing": false,
     "obsolete": false
   },
-  "panel_title_acc_general": {
-    "translation": "General",
-    "defaultMessage": "General",
-    "description": "Title for TopicCommonView.",
-    "missing": false,
-    "obsolete": true
-  },
-  "panel_title_acc_security": {
-    "translation": "Security",
-    "defaultMessage": "Security",
-    "description": "Title for TopicSecirityView and AccSecurityView.",
-    "missing": false,
-    "obsolete": true
-  },
   "panel_title_crop": {
     "translation": "Drag to Adjust",
     "defaultMessage": "Drag to Adjust",
@@ -1409,5 +1353,12 @@
     "description": "Contact search prompt when forwarding a message.",
     "missing": false,
     "obsolete": false
+  },
+  "label_new_password": {
+    "translation": "New password",
+    "defaultMessage": "New password",
+    "description": "Label for entering a new password",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/es.json

@@ -1353,5 +1353,12 @@
     "description": "Contact search prompt when forwarding a message.",
     "missing": false,
     "obsolete": false
+  },
+  "label_new_password": {
+    "translation": "Nueva contraseña",
+    "defaultMessage": "New password",
+    "description": "Label for entering a new password",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/ex/base-en.json

@@ -302,6 +302,10 @@
     "defaultMessage": "Muted:",
     "description": "Label for Muting/unmuting the topic"
   },
+  "label_new_password": {
+    "defaultMessage": "New password",
+    "description": "Label for entering a new password"
+  },
   "label_other_user": {
     "defaultMessage": "Other",
     "description": "Label for the other user when the user is unnamed"

src/i18n/ko.json

@@ -1353,5 +1353,12 @@
     "description": "Contact search prompt when forwarding a message.",
     "missing": false,
     "obsolete": false
+  },
+  "label_new_password": {
+    "translation": "새 비밀번호",
+    "defaultMessage": "New password",
+    "description": "Label for entering a new password",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/ro.json

@@ -1353,5 +1353,12 @@
     "description": "Contact search prompt when forwarding a message.",
     "missing": false,
     "obsolete": false
+  },
+  "label_new_password": {
+    "translation": "Parolă Nouă",
+    "defaultMessage": "New password",
+    "description": "Label for entering a new password",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/ru.json

@@ -1353,5 +1353,12 @@
     "description": "Contact search prompt when forwarding a message.",
     "missing": false,
     "obsolete": false
+  },
+  "label_new_password": {
+    "translation": "Новый пароль",
+    "defaultMessage": "New password",
+    "description": "Label for entering a new password",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/zh-TW.json

@@ -1353,5 +1353,12 @@
     "description": "Contact search prompt when forwarding a message.",
     "missing": false,
     "obsolete": false
+  },
+  "label_new_password": {
+    "translation": "新密碼",
+    "defaultMessage": "New password",
+    "description": "Label for entering a new password",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/zh.json

@@ -1353,5 +1353,12 @@
     "description": "Contact search prompt when forwarding a message.",
     "missing": false,
     "obsolete": false
+  },
+  "label_new_password": {
+    "translation": "新密码",
+    "defaultMessage": "New password",
+    "description": "Label for entering a new password",
+    "missing": false,
+    "obsolete": false
   }
 }

src/lib/blob-helpers.js

@@ -1,6 +1,4 @@
 // File and image helper functions.
-import { MAX_INBAND_ATTACHMENT_SIZE, MAX_IMAGE_DIM } from '../config.js';
-import { bytesToHumanSize } from './strformat.js'
 
 // Supported image MIME types and corresponding file extensions.
 export const SUPPORTED_IMAGE_FORMATS = ['image/jpeg', 'image/gif', 'image/png', 'image/svg', 'image/svg+xml'];
@@ -9,11 +7,13 @@ export const MIME_EXTENSIONS         = ['jpg',        'gif',       'png',
 // Get an URL from a theCard photo: either create a data: URL or return reference URL.
 export function makeImageUrl(photo) {
   if (photo && typeof photo == 'object') {
+    if (photo.ref) {
+      return photo.ref
+    }
     if (photo.data && photo.type) {
       const mime = photo.type.startsWith('image/') ? photo.type : ('image/' + photo.type);
       return 'data:' + mime + ';base64,' + photo.data;
     }
-    return photo.ref;
   }
   return null;
 }

src/lib/formatters.js

@@ -124,25 +124,31 @@ function quotedImage(data) {
 //    onImagePreview: this.handleImagePreview
 //    onFormButtonClick: this.handleFormButtonClick
 //    onQuoteClick: this.handleQuoteClick (optional)
-export function fullFormatter(style, data, values, key) {
+export function fullFormatter(style, data, values, key, stack) {
+  if (stack.includes('QQ')) {
+    return quoteFormatter.call(this, style, data, values, key);
+  }
+
   if (!style) {
     // Unformatted.
     return values;
   }
 
-  if (style == 'HD') {
-    // Hidden.
-    return null;
-  }
-
   let el = Drafty.tagName(style);
   const attr = Drafty.attrValue(style, data) || {};
   attr.key = key;
   switch (style) {
+    case 'BR':
+      values = null;
+      break;
     case 'HL':
       // Highlighted text. Assign class name.
       attr.className = 'highlight';
       break;
+    case 'HD':
+      el = null;
+      values = null;
+      break;
     case 'IM':
       // Additional processing for images
       el = handleImageData.call(this, el, data, attr);
@@ -192,7 +198,7 @@ export function fullFormatter(style, data, values, key) {
     return values;
   }
   return React.createElement(el, attr, values);
-};
+}
 
 // Converts Drafty object into a one-line preview. 'this' is set by the caller.
 // 'this' must contain:
@@ -204,11 +210,6 @@ export function previewFormatter(style, data, values, key) {
     return values;
   }
 
-  if (style == 'HD') {
-    // Hidden.
-    return null;
-  }
-
   let el = Drafty.tagName(style);
   const attr = { key: key };
   switch (style) {
@@ -256,6 +257,11 @@ export function previewFormatter(style, data, values, key) {
       el = React.Fragment;
       values = [<i key="ex" className="material-icons">attachment</i>, this.formatMessage(messages.drafty_attachment)];
       break;
+    case 'QQ':
+    case 'HD':
+      el = null;
+      values = null;
+      break;
     default:
       if (el == '_UNKN') {
         el = React.Fragment;
@@ -292,12 +298,15 @@ function inlineImageAttr(attr, data) {
 //    messages: formatjs messages defined with defineMessages.
 //    authorizeURL: this.props.tinode.authorizeURL
 //    onQuoteClick: this.handleQuoteClick (optional)
-export function quoteFormatter(style, data, values, key) {
+function quoteFormatter(style, data, values, key) {
-  if (['BR', 'EX', 'IM', 'MN', 'QQ'].includes(style)) {
+  if (['BR', 'EX', 'IM', 'MN'].includes(style)) {
     let el = Drafty.tagName(style);
     let attr = Drafty.attrValue(style, data) || {};
     attr.key = key;
     switch(style) {
+      case 'BR':
+        values = null;
+        break;
       case 'IM':
         attr = inlineImageAttr.call(this, attr, data);
         values = [React.createElement('img', attr, null), ' ', attr.alt];
@@ -312,10 +321,6 @@ export function quoteFormatter(style, data, values, key) {
           attr.className += ' ' + idToColorClass(data.val, false, true);
         }
         break;
-      case 'QQ':
-        attr.className = 'reply-quote';
-        attr.onClick = this.onQuoteClick;
-        break;
       case 'EX':
         let fname;
         if (data) {
@@ -344,15 +349,21 @@ function quoteImage(data) {
   // Get the blob from the image data.
   if (data.val) {
     const blob = base64ToBlob(data.val, data.mime);
-    promise = blob ? Promise.resolve(blob) : Promise.reject(new Error("Invalid image"));
+    if (!blob) {
-  } else {
+      throw new Error("Invalid image");
-    promise = fetch(this.authorizeURL(sanitizeImageUrl(data.ref))).then(evt => {
+    }
+    promise = Promise.resolve(blob);
+  } else if (data.ref) {
+    promise = fetch(this.authorizeURL(sanitizeImageUrl(data.ref)))
+      .then(evt => {
         if (evt.ok) {
           return evt.blob();
         } else {
           throw new Error(`Image fetch unsuccessful: ${evt.status} ${evt.statusText}`);
         }
       });
+  } else {
+    throw new Error("Missing image data");
   }
 
   // Scale the blob.
@@ -384,12 +395,29 @@ function quoteImage(data) {
 }
 
 // Create a preview of a reply.
-export function replyFormatter(style, data, values, key) {
+export function replyFormatter(style, data, values, key, stack) {
-  if (style != 'IM') {
+  if (style == 'IM') {
-    return quoteFormatter.call(this, style, data, values, key);
-  }
     const attr = inlineImageAttr.call(this, {key: key}, data);
-  attr.whenDone = cancelablePromise(quoteImage.call(this, data));
+    let loadedPromise;
+    try {
+      loadedPromise = cancelablePromise(quoteImage.call(this, data));
+    } catch (error) {
+      loadedPromise = cancelablePromise(error);
+    }
+    attr.whenDone = loadedPromise;
     values = [React.createElement(LazyImage, attr, null), ' ', attr.alt];
     return React.createElement(React.Fragment, {key: key}, values);
+  } else if (style == 'QQ') {
+    if (stack.includes('QQ')) {
+      // Quote inside quote when forwarding a message.
+      return React.createElement('span', {key: key},
+        [<i key="qq" className="material-icons">format_quote</i>, ' ']);
+    }
+
+    const attr = Drafty.attrValue('QQ', data) || {};
+    attr.key = key;
+    attr.className = 'reply-quote'
+    return React.createElement(Drafty.tagName('QQ'), attr, values);
+  }
+  return quoteFormatter.call(this, style, data, values, key);
 }

src/lib/utils.js

@@ -183,10 +183,14 @@ export function deliveryMarker(received) {
 }
 
 // Wraps a promise to make it cancelable.
+// The parameter can be either a promise or an error. If it's an error, the wrapped promise is
+// created in a rejected state.
 export function cancelablePromise(promise) {
   let hasCanceled = false;
 
-  const wrappedPromise = new Promise((resolve, reject) => {
+  const wrappedPromise = promise instanceof Error ?
+    Promise.reject(promise) :
+    new Promise((resolve, reject) => {
       promise.then(
         result => hasCanceled ? reject({isCanceled: true}) : resolve(result),
         error => hasCanceled ? reject({isCanceled: true}) : reject(error)

src/version.js

@@ -1,3 +1,3 @@
 // This is a generated file. Don't edit.
 
-export const PACKAGE_VERSION = "0.18.0-beta2";
+export const PACKAGE_VERSION = "0.18.0-rc3";

src/views/messages-view.jsx

@@ -223,7 +223,6 @@ class MessagesView extends React.Component {
         const preview = nextProps.forwardMessage.preview;
         reply = {
           content: preview,
-          forwarded: nextProps.forwardMessage.head.forwarded,
           seq: null
         };
       }
@@ -713,7 +712,7 @@ class MessagesView extends React.Component {
       if (typeof msg == 'string') {
         msg = Drafty.parse(msg);
       }
-      msg = Drafty.append(this.state.reply.content, msg);
+      msg = Drafty.append(Drafty.sanitizeEntities(this.state.reply.content), msg);
       this.handleCancelReply();
     }
     this.props.sendMessage(msg, uploadCompletionPromise, uploader, head);
@@ -867,18 +866,21 @@ class MessagesView extends React.Component {
     uploader.cancel();
   }
 
-  handlePickReply(seq, content, forwarded, senderId, senderName) {
+  // seq: seq ID of the source message
+  // context: message content.
+  // forwarded: true if the source message is also a forwarded message.
+  // senderId: UID of the sender of the source message.
+  // senderName: full name of the sender of the original message.
+  handlePickReply(seq, content, senderId, senderName) {
     this.setState({reply: null});
 
     if (!seq || !content) {
       return;
     }
 
-    content = forwarded ?
+    content = typeof content == 'string' ? Drafty.init(content) : content;
-        Drafty.forwardedContent(content) :
-        typeof content == 'string' ? Drafty.init(content) : content;
     if (Drafty.isValid(content)) {
-      content = Drafty.preview(content, QUOTED_REPLY_LENGTH, undefined, !forwarded);
+      content = Drafty.replyContent(content, QUOTED_REPLY_LENGTH);
     } else {
       // /!\ invalid content.
       content = Drafty.append(Drafty.init('\u26A0 '),
@@ -1010,7 +1012,6 @@ class MessagesView extends React.Component {
             <ChatMessage
               tinode={this.props.tinode}
               content={msg.content}
-              forwarded={msg.head ? msg.head.forwarded : null}
               deleted={msg.hi}
               mimeType={msg.head ? msg.head.mime : null}
               timestamp={msg.ts}

src/views/new-topic-view.jsx

@@ -35,7 +35,7 @@ class NewTopicView extends React.Component {
     super(props);
 
     this.state = {
-      tabSelected: 'p2p',
+      tabSelected: 'find',
       searchQuery: null
     };
 
@@ -62,7 +62,7 @@ class NewTopicView extends React.Component {
   }
 
   handleContactSelected(uid) {
-    if (this.state.tabSelected == 'p2p') {
+    if (this.state.tabSelected == 'find') {
       HashNavigation.navigateTo(HashNavigation.removeUrlParam(window.location.hash, 'tab'));
       this.props.onCreateTopic(uid);
     }
@@ -87,8 +87,8 @@ class NewTopicView extends React.Component {
     return (
       <div className="flex-column">
         <ul className="tabbar">
-          <li className={this.state.tabSelected === "p2p" ? "active" : null}>
+          <li className={this.state.tabSelected === "find" ? "active" : null}>
-            <a href="#" data-id="p2p" onClick={this.handleTabClick}>
+            <a href="#" data-id="find" onClick={this.handleTabClick}>
               <FormattedMessage id="tabtitle_find_user" defaultMessage="find"
                 description="Tab title Find" />
             </a>
@@ -116,7 +116,6 @@ class NewTopicView extends React.Component {
               onError={this.props.onError} /> :
             <div className="flex-column">
               <SearchContacts
-                type="p2p"
                 placeholder={search_placeholder}
                 onSearchContacts={this.handleSearchContacts} />
               <ContactList

src/views/password-reset-view.jsx

@@ -53,15 +53,21 @@ export default class PasswordResetView extends React.PureComponent {
     return (
       <form id="password-reset-form" onSubmit={this.handleSubmit}>
         {(this.state.token && this.state.scheme) ?
+          <><label htmlFor="new-password">
+            <FormattedMessage id="label_new_password"
+              defaultMessage="New password"
+              description="Label for entering a new password" />
+          </label>
           <FormattedMessage id="new_password_placeholder" defaultMessage="Enter new password"
             description="Placeholder for entering new password">{
             (placeholder) => <VisiblePassword
+              id="new-password"
               placeholder={placeholder}
               autoComplete="new-password"
               value={this.state.password}
               required={true} autoFocus={true}
               onChange={this.handlePasswordChange} />
-          }</FormattedMessage>
+          }</FormattedMessage></>
         : this.state.sent ?
           <>
             <br/>

src/views/tinode-web.jsx

@@ -16,7 +16,7 @@ import MessagesView from './messages-view.jsx';
 import SidepanelView from './sidepanel-view.jsx';
 
 import { API_KEY, APP_NAME, DEFAULT_P2P_ACCESS_MODE, FORWARDED_PREVIEW_LENGTH, LOGGING_ENABLED,
-  MEDIA_BREAKPOINT, QUOTED_REPLY_LENGTH, RECEIVED_DELAY } from '../config.js';
+  MEDIA_BREAKPOINT, RECEIVED_DELAY } from '../config.js';
 import { PACKAGE_VERSION } from '../version.js';
 import { base64ReEncode, makeImageUrl } from '../lib/blob-helpers.js';
 import { detectServerAddress, isLocalHost, isSecureConnection } from '../lib/host-name.js';
@@ -288,9 +288,12 @@ class TinodeWeb extends React.Component {
         });
       }
 
-      // Save possible topic name and navigate to blank state.
+      // Maybe navigate to home screen.
+      if (!['cred', 'reset', 'register'].includes(parsedNav.path[0])) {
+        // Save possible topic name.
         this.setState({requestedTopic: parsedNav.path[1]});
         HashNavigation.navigateTo('');
+      }
 
       this.readTimer = null;
       this.readTimerCallback = null;
@@ -1199,6 +1202,8 @@ class TinodeWeb extends React.Component {
       delete parsed.params.code;
       delete parsed.params.method;
       delete parsed.params.tab;
+      delete parsed.params.scheme;
+      delete parsed.params.token;
     }
     HashNavigation.navigateTo(HashNavigation.composeUrlHash(parsed.path, parsed.params));
     this.setState({errorText: '', errorLevel: null});
@@ -1230,9 +1235,11 @@ class TinodeWeb extends React.Component {
       params.desc = {defacs: {auth: DEFAULT_P2P_ACCESS_MODE}};
     } else {
       topicName = topicName || this.tinode.newGroupTopicName(isChannel);
+      if (newTopicParams) {
         params.desc = {public: newTopicParams.public, private: {comment: newTopicParams.private}};
         params.tags = newTopicParams.tags;
       }
+    }
     params._topicName = topicName;
     this.setState({newTopicParams: params}, () => {this.handleTopicSelected(topicName)});
   }
@@ -1443,22 +1450,22 @@ class TinodeWeb extends React.Component {
     });
   }
 
+  //
   handleShowForwardDialog(params) {
     if (this.state.sidePanelSelected == 'newtpk') {
       // If the Find panel is active, close it.
       this.handleSidepanelCancel();
     }
     const header = '➦ ' + params.userName;
-    const content = params.forwarded ?
+    const content = typeof params.content == 'string' ?
-        Tinode.Drafty.forwardedContent(params.content) :
+            Tinode.Drafty.init(params.content) : Tinode.Drafty.forwardedContent(params.content);
-        typeof params.content == 'string' ?
-            Tinode.Drafty.init(params.content) : params.content;
     const preview = Tinode.Drafty.preview(content, FORWARDED_PREVIEW_LENGTH,
                                           undefined, params.forwarded != null);
     const msg = Tinode.Drafty.append(
         Tinode.Drafty.appendLineBreak(
             Tinode.Drafty.mention(header, params.userFrom)),
         content);
+
     const msgPreview = Tinode.Drafty.quote(header, params.userFrom, preview);
     const head = {
       forwarded: params.topicName + ':' + params.seq
@@ -1611,6 +1618,9 @@ class TinodeWeb extends React.Component {
         .then(() => {
           return this.tinode.updateAccountBasic(null, null, newPassword, {token: token});
         })
+        .then(() => {
+          HashNavigation.navigateTo('');
+        })
         .catch((err) => {
           // Socket error
           this.handleError(err.message, 'err');

src/widgets/avatar-upload.jsx

@@ -34,7 +34,7 @@ export default class AvatarUpload extends React.Component {
   render() {
     // Randomize id value in case more than one AvatarUpload is shown
     // at the same time.
-    const randId = 'file-input-avatar-' + (Math.random() + '').substr(2);
+    const randId = 'file-input-avatar-' + ('' + Math.random()).substring(0, 4);
     const className = 'avatar-upload' + (this.props.readOnly ? ' read-only' : '');
     return (
       <div className={className}>

src/widgets/chat-message.jsx

@@ -7,8 +7,8 @@ import Attachment from './attachment.jsx';
 import LetterTile from './letter-tile.jsx';
 import ReceivedMarker from './received-marker.jsx'
 
-import { fullFormatter, quoteFormatter } from '../lib/formatters.js';
+import { fullFormatter } from '../lib/formatters.js';
-import { sanitizeImageUrl, sanitizeUrl } from '../lib/utils.js';
+import { sanitizeUrl } from '../lib/utils.js';
 
 class BaseChatMessage extends React.PureComponent {
   constructor(props) {
@@ -29,7 +29,6 @@ class BaseChatMessage extends React.PureComponent {
     this.handleQuoteClick = this.handleQuoteClick.bind(this);
 
     this.formatterContext = {
-      getFormatter: (tp) => { return tp == 'QQ' ? quoteFormatter : null; },
       formatMessage: props.intl.formatMessage.bind(props.intl),
       viewportWidth: props.viewportWidth,
       authorizeURL: props.tinode.authorizeURL.bind(props.tinode),
@@ -87,7 +86,6 @@ 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

src/widgets/contact-list.jsx

@@ -86,9 +86,10 @@ class ContactList extends React.Component {
               deliveryStatus = msg._status || c.msgStatus(msg, true);
               preview = typeof msg.content == 'string' ?
                 msg.content.substr(0, MESSAGE_PREVIEW_LENGTH) :
-                Drafty.preview(msg.content, MESSAGE_PREVIEW_LENGTH, undefined, forwarded != null);
+                Drafty.preview(msg.content, MESSAGE_PREVIEW_LENGTH);
             }
           }
+
           contactNodes.push(
             <Contact
               tinode={this.props.tinode}

src/widgets/contact.jsx

@@ -69,17 +69,20 @@ class Contact extends React.Component {
       }
     }
 
-    const subtitle = this.props.preview ?
+    // The this.props.preview contains alreay shortened Drafty or string.
-      (typeof this.props.preview == 'string' ? this.props.preview :
+    let preview;
-        Drafty.isValid(this.props.preview) ?
+    if (typeof this.props.preview == 'string') {
-        React.createElement(React.Fragment, null, Drafty.format(this.props.preview, previewFormatter,
+      preview = this.props.preview;
-          {formatMessage: this.props.intl.formatMessage})) :
+    } else if (Drafty.isValid(this.props.preview)) {
+      preview = React.createElement(React.Fragment, null, Drafty.format(this.props.preview, previewFormatter,
+        {formatMessage: this.props.intl.formatMessage}));
+    } else if (this.props.preview) {
+      preview =
         <><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>
-        </>
+        </>;
-      ) :
+    }
-      this.props.comment;
 
     const icon = deliveryMarker(this.props.received);
     const marker = icon ? <i className={'material-icons small space-right' +
@@ -105,7 +108,7 @@ class Contact extends React.Component {
           </div>
           {this.props.showMode ?
             <span><ContactBadges badges={badges} /></span> :
-            this.props.small ? null : <div className="contact-comment">{marker}<span>{subtitle || '\u00A0'}</span></div>}
+            this.props.small ? null : <div className="contact-comment">{marker}<span>{preview || this.props.comment || '\u00A0'}</span></div>}
         </div>
         {this.props.showContextMenu ?
           <span className="menuTrigger">

src/widgets/context-menu.jsx

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

src/widgets/image-preview.jsx

@@ -55,7 +55,7 @@ export default class ImagePreview extends React.PureComponent {
       <div id="image-preview">
         <div id="image-preview-caption-panel">
           {!this.props.onSendMessage ?
-            <a href={this.props.content.url} download={this.props.content.name}>
+            <a href={this.props.content.url} download={true}>
               <i className="material-icons">file_download</i> <FormattedMessage
                 id="download_action" defaultMessage="download" description="Call to action [download]" />
             </a>

src/widgets/lazy-image.jsx

@@ -31,6 +31,7 @@ export default class LazyImage extends React.PureComponent {
     if (prevProps.whenDone != this.props.whenDone) {
       this.setState({src: 'img/placeholder.png', style: {...this.state.style, padding: '4px'}});
       this.props.whenDone
+        .promise
         .then(data => this.setState({src: data.src, style: {...this.state.style, padding: 0}}))
         .catch(() => this.setState({src: 'img/broken_image.png'}));
     }

src/widgets/search-contacts.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
 
 import Tinode from 'tinode-sdk';
 

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 } from '../lib/formatters.js';
+import { replyFormatter } from '../lib/formatters.js';
 
 const messages = defineMessages({
   messaging_disabled: {
@@ -40,6 +40,7 @@ class SendMessage extends React.PureComponent {
     super(props);
 
     this.state = {
+      quote: null,
       message: '',
       // Make initial keypress time as if it happened 5001 milliseconds in the past.
       keypressTimestamp: new Date().getTime() - KEYPRESS_DELAY - 1

src/widgets/topic-desc-edit.jsx

@@ -10,8 +10,8 @@ import AvatarUpload from './avatar-upload.jsx';
 import InPlaceEdit from './in-place-edit.jsx';
 import TagManager from './tag-manager.jsx';
 
-import { AVATAR_SIZE, MAX_AVATAR_BYTES, MAX_EXTERN_ATTACHMENT_SIZE,
+import { AVATAR_SIZE, MAX_AVATAR_BYTES, MAX_EXTERN_ATTACHMENT_SIZE, MAX_TITLE_LENGTH,
-  MAX_INBAND_ATTACHMENT_SIZE, MAX_TITLE_LENGTH, MAX_TOPIC_DESCRIPTION_LENGTH } from '../config.js';
+  MAX_TOPIC_DESCRIPTION_LENGTH } from '../config.js';
 import { imageScaled, blobToBase64, makeImageUrl } from '../lib/blob-helpers.js';
 import { arrayEqual, theCard } from '../lib/utils.js';
 

version.js

@@ -1,3 +1,3 @@
 // This is a generated file. Don't edit.
 
-const PACKAGE_VERSION = "0.18.0-beta2";
+const PACKAGE_VERSION = "0.18.0-rc3";