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.
+      // Disable links in previews.
-      values = extractMentionSymbol(values);
       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 ?
+    // 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">

umd/index.dev.js

@@ -546,6 +546,10 @@ function fullFormatter(style, data, values, key) {
   attr.key = key;
 
   switch (style) {
+    case 'BR':
+      values = null;
+      break;
+
     case 'HL':
       attr.className = 'highlight';
       break;
@@ -606,18 +610,9 @@ function fullFormatter(style, data, values, key) {
 
   return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(el, attr, values);
 }
-
-function extractMentionSymbol(content) {
-  if (Array.isArray(content) && content.length > 0) {
-    content = extractMentionSymbol(content[0]);
-  } else if (typeof content == 'string' && content.startsWith('➦')) {
-    content = ['➦'];
-  }
-
-  return content;
-}
-
 function previewFormatter(style, data, values, key) {
+  console.log("Formatting (s, d, v, k):", style, data, values, key);
+
   if (!style) {
     return values;
   }
@@ -642,11 +637,7 @@ function previewFormatter(style, data, values, key) {
       break;
 
     case 'LN':
-      el = 'span';
-      break;
-
     case 'MN':
-      values = extractMentionSymbol(values);
       el = 'span';
       break;
 
@@ -737,6 +728,10 @@ function quoteFormatter(style, data, values, key) {
     attr.key = key;
 
     switch (style) {
+      case 'BR':
+        values = null;
+        break;
+
       case 'IM':
         attr = inlineImageAttr.call(this, attr, data);
         values = [react__WEBPACK_IMPORTED_MODULE_0___default().createElement('img', attr, null), ' ', attr.alt];
@@ -8493,7 +8488,7 @@ class ContactList extends (react__WEBPACK_IMPORTED_MODULE_0___default().Componen
             if (msg) {
               forwarded = msg.head ? msg.head.forwarded : null;
               deliveryStatus = msg._status || c.msgStatus(msg, true);
-              preview = typeof msg.content == 'string' ? msg.content.substr(0, _config_js__WEBPACK_IMPORTED_MODULE_6__.MESSAGE_PREVIEW_LENGTH) : tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.preview(msg.content, _config_js__WEBPACK_IMPORTED_MODULE_6__.MESSAGE_PREVIEW_LENGTH, undefined, forwarded != null);
+              preview = typeof msg.content == 'string' ? msg.content.substr(0, _config_js__WEBPACK_IMPORTED_MODULE_6__.MESSAGE_PREVIEW_LENGTH) : tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.preview(msg.content, _config_js__WEBPACK_IMPORTED_MODULE_6__.MESSAGE_PREVIEW_LENGTH);
             }
           }
 
@@ -8667,9 +8662,16 @@ class Contact extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component) {
       }
     }
 
-    const subtitle = this.props.preview ? typeof this.props.preview == 'string' ? this.props.preview : tinode_sdk__WEBPACK_IMPORTED_MODULE_6__.Drafty.isValid(this.props.preview) ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, tinode_sdk__WEBPACK_IMPORTED_MODULE_6__.Drafty.format(this.props.preview, _lib_formatters_js__WEBPACK_IMPORTED_MODULE_7__.previewFormatter, {
+    let preview;
+
+    if (typeof this.props.preview == 'string') {
+      preview = this.props.preview;
+    } else if (tinode_sdk__WEBPACK_IMPORTED_MODULE_6__.Drafty.isValid(this.props.preview)) {
+      preview = react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, tinode_sdk__WEBPACK_IMPORTED_MODULE_6__.Drafty.format(this.props.preview, _lib_formatters_js__WEBPACK_IMPORTED_MODULE_7__.previewFormatter, {
         formatMessage: this.props.intl.formatMessage
-    })) : react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
+      }));
+    } else if (this.props.preview) {
+      preview = react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
         className: "material-icons gray"
       }, "warning_amber"), " ", react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
         className: "gray"
@@ -8679,7 +8681,9 @@ class Contact extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component) {
           "type": 0,
           "value": "invalid content"
         }]
-    }))) : this.props.comment;
+      })));
+    }
+
     const icon = (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_8__.deliveryMarker)(this.props.received);
     const marker = icon ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
       className: 'material-icons small space-right' + (icon.color ? ' ' + icon.color : '')
@@ -8714,7 +8718,7 @@ class Contact extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component) {
       badges: badges
     })) : this.props.small ? null : react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "contact-comment"
-    }, marker, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, subtitle || '\u00A0'))), this.props.showContextMenu ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+    }, marker, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, preview || this.props.comment || '\u00A0'))), this.props.showContextMenu ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
       className: "menuTrigger"
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
       href: "#",