refactoring split formatters - transformers

src/lib/formatters.js

@@ -139,6 +139,9 @@ export function fullFormatter(style, data, values, key) {
   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';
@@ -194,22 +197,12 @@ export function fullFormatter(style, data, values, key) {
   return React.createElement(el, attr, values);
 }
 
-// Unexported utility function: extract '➦' from mention if it's the first symbol,
-// otherwise return the whole mention.
-function extractMentionSymbol(content) {
-  if (Array.isArray(content) && content.length > 0) {
-    content = extractMentionSymbol(content[0]);
-  } else if (typeof content == 'string' && content.startsWith('➦')) {
-    content = ['➦'];
-  }
-  return content;
-}
-
 // 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) {
+  console.log("Formatting (s, d, v, k):", style, data, values, key);
   if (!style) {
     // Unformatted.
     return values;
@@ -233,12 +226,8 @@ export function previewFormatter(style, data, values, key) {
       attr.className = 'highlight preview';
       break;
     case 'LN':
-      // Disable links in previews.
-      el = 'span';
-      break;
     case 'MN':
-      // If mention starts with '➦', keep just that one symbol.
-      values = extractMentionSymbol(values);
+      // Disable links in previews.
       el = 'span';
       break;
     case 'IM':
@@ -313,6 +302,9 @@ export function quoteFormatter(style, data, values, key) {
     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];

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';
@@ -1448,12 +1448,14 @@ 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;
+    // params.forwarded means the source message is also a forwarded message.
     const content = params.forwarded ?
         Tinode.Drafty.forwardedContent(params.content) :
         typeof params.content == 'string' ?

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 ?
-      (typeof this.props.preview == 'string' ? this.props.preview :
-        Drafty.isValid(this.props.preview) ?
-        React.createElement(React.Fragment, null, Drafty.format(this.props.preview, previewFormatter,
-          {formatMessage: this.props.intl.formatMessage})) :
+    // The this.props.preview contains alreay shortened Drafty or string.
+    let preview;
+    if (typeof this.props.preview == 'string') {
+      preview = this.props.preview;
+    } 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">