TheCard handling in messages

src/widgets/avatar-upload.jsx

@@ -48,7 +48,7 @@ export default class AvatarUpload extends React.Component {
           this.props.readOnly && this.props.uid ?
             <div className="avatar-box">
               <LetterTile
-                tinode={this.props.tinode}
+                authorizeURL={this.props.tinode.authorizeURL}
                 avatar={true}
                 topic={this.props.uid}
                 title={this.props.title} />

src/widgets/call-incoming.jsx

@@ -122,7 +122,7 @@ export default class CallIncoming extends React.Component {
           <div className="caller-card incoming pulse">
             <div className="avatar-box">
               <LetterTile
-                tinode={this.props.tinode}
+                authorizeURL={this.props.tinode.authorizeURL}
                 avatar={this.state.avatar || true}
                 topic={this.props.topic}
                 title={this.state.fullName} />

src/widgets/call-panel.jsx

@@ -680,7 +680,7 @@ class CallPanel extends React.PureComponent {
                 <div className={`caller-card${pulseAnimation} draggable`}>
                   <div className="avatar-box">
                     <LetterTile
-                      tinode={this.props.tinode}
+                      authorizeURL={this.props.tinode.authorizeURL}
                       avatar={this.props.avatar}
                       topic={this.props.topic}
                       title={this.props.title} />

src/widgets/chat-message.jsx

@@ -26,22 +26,46 @@ class BaseChatMessage extends React.PureComponent {
     this.handleExpandImage = this.handleExpandImage.bind(this);
     this.handlePlayVideo = this.handlePlayVideo.bind(this);
     this.handleFormButtonClick = this.handleFormButtonClick.bind(this);
+    this.handleQuoteClick = this.handleQuoteClick.bind(this);
     this.handleContextClick = this.handleContextClick.bind(this);
     this.handleCancelUpload = this.handleCancelUpload.bind(this);
-    this.handleQuoteClick = this.handleQuoteClick.bind(this);
+    this.handleDraftyClick = this.handleDraftyClick.bind(this);
 
     this.formatterContext = {
       formatMessage: props.intl.formatMessage.bind(props.intl),
       viewportWidth: props.viewportWidth,
       authorizeURL: props.tinode.authorizeURL.bind(props.tinode),
 
-      onImagePreview: this.handleExpandImage,
-      onVideoPreview: this.handlePlayVideo,
-      onFormButtonClick: this.handleFormButtonClick,
-      onQuoteClick: this.handleQuoteClick
+      onHandleClick: this.handleDraftyClick
     };
   }
 
+  handleDraftyClick = (e, action) => {
+    switch (action) {
+      case 'image':
+        this.handleExpandImage(e);
+        break;
+      case 'video':
+        this.handlePlayVideo(e);
+        break;
+      case 'form_button':
+        this.handleFormButtonClick(e);
+        break;
+      case 'quote':
+        this.handleQuoteClick(e);
+        break;
+      case 'contact_chat':
+      case 'contact_find':
+        e.preventDefault();
+        console.log('Contact click handling not implemented yet.', action, e.target.dataset);
+        break;
+      default:
+        // No special handling; let the browser deal with it.
+        console.log('Unhandled drafty action.', action, e.target.dataset);
+        break;
+    }
+  }
+
   handleExpandImage(e) {
     e.preventDefault();
     this.props.onExpandMedia({
@@ -99,7 +123,7 @@ class BaseChatMessage extends React.PureComponent {
         if (!this.props.response) {
           let immutable = false;
           Drafty.entities(this.props.content, (_0, _1, tp) => {
-            immutable = ['AU', 'EX', 'FM', 'IM', 'VC', 'VD'].includes(tp);
+            immutable = ['AU', 'EX', 'FM', 'IM', 'TC', 'VC', 'VD'].includes(tp);
             return immutable;
           });
           if (!immutable) {
@@ -200,7 +224,7 @@ class BaseChatMessage extends React.PureComponent {
           <div className="avatar-box">
             {fullDisplay ?
               <LetterTile
-                tinode={this.props.tinode}
+                authorizeURL={this.props.tinode.authorizeURL}
                 topic={this.props.userFrom}
                 title={this.props.userName}
                 avatar={avatar} /> :

src/widgets/chip.jsx

@@ -23,7 +23,7 @@ export default class Chip extends React.PureComponent {
           <span className="spacer" /> :
           <div className="avatar-box">
             <LetterTile
-              tinode={this.props.tinode}
+              authorizeURL={this.props.tinode.authorizeURL}
               avatar={this.props.avatar || true}
               topic={this.props.topic}
               title={this.props.title} />

src/widgets/contact.jsx

@@ -122,7 +122,7 @@ class Contact extends React.Component {
       <li className={bgColor} onClick={this.handleClick}>
         <div className="avatar-box">
           <LetterTile
-            tinode={this.props.tinode}
+            authorizeURL={this.props.tinode.authorizeURL}
             avatar={avatar}
             title={this.props.title}
             topic={this.props.item}

src/widgets/group-subs.jsx

@@ -22,7 +22,7 @@ export default class GroupSubs extends React.Component {
       usersOnline.push(
         <div className="avatar-box" key={sub.user}>
           <LetterTile
-            tinode={this.props.tinode}
+            authorizeURL={this.props.tinode.authorizeURL}
             topic={sub.user}
             avatar={makeImageUrl(sub.public ? sub.public.photo : null) || true}
             title={sub.public ? sub.public.fn : null} />

src/widgets/letter-tile.jsx

@@ -27,7 +27,7 @@ export default class LetterTile extends React.PureComponent {
         }
       }
     } else if (this.props.avatar) {
-      const url = this.props.tinode.authorizeURL(sanitizeUrlForMime(this.props.avatar, 'image'));
+      const url = this.props.authorizeURL(sanitizeUrlForMime(this.props.avatar, 'image'));
       // If avatar image is invalid, show a placeholder.
       const className = 'avatar' + (this.props.deleted ? ' deleted' : '');
       avatar = <img className={className} alt="avatar" src={url}

src/widgets/side-navbar.jsx

@@ -26,7 +26,7 @@ export default class SideNavbar extends React.PureComponent {
         {avatar ?
           <div id="self-avatar" className="avatar-box">
             <LetterTile
-              tinode={this.props.tinode}
+              authorizeURL={this.props.tinode.authorizeURL}
               avatar={avatar}
               topic={this.props.myUserId}
               title={this.props.title} />