Fix:the user name in inline comments section is followed by some inte…

…rnal code which should be omitted in UI [SDESK-6685] (#4161)

* Fix:the user name in inline comments section is followed by some internal code which should be omitted in UI [SDESK-6685]

* code reused for the new fix

* Address comment and refoactored code

* Removed unwanted code and rectified interface name

* minor changes

* use FunctionComponent(StatelessComponent deprecated), remove use IProps instead of "any" type

Co-authored-by: Tomas Kikutis <t.kikutis@gmail.com>

scripts/apps/authoring/authoring/index.ts

@@ -33,6 +33,7 @@ import {AuthoringTopbar2React} from './authoring-topbar2-react';
 import {appConfig} from 'appConfig';
 import {FullPreview} from '../preview/fullPreview';
 import {sdApi} from 'api';
+import {TextWithMentions} from 'apps/users/components';
 
 export interface IOnChangeParams {
     item: IArticle;
@@ -118,6 +119,7 @@ angular.module('superdesk.apps.authoring', [
     .directive('sdPreviewFormatted', directive.PreviewFormattedDirective)
     .directive('sdAuthoringContainer', directive.AuthoringContainerDirective)
     .directive('sdAuthoringEmbedded', directive.AuthoringEmbeddedDirective)
+    .component('sdTextWithMentions', reactToAngular1(TextWithMentions, ['message']))
     .directive('sdAuthoringHeader', directive.AuthoringHeaderDirective)
     .directive('sdItemAssociation', directive.ItemAssociationDirective)
     .directive('sdItemCarousel', directive.ItemCarouselDirective)

scripts/apps/authoring/track-changes/views/inline-comments-widget.html

@@ -11,7 +11,8 @@ <h4 class="label">{{commentObj.fieldName}}</h4>
                     <div class="flex-row sibling-spacer-10">
                         <sd-user-avatar data-user="users[item.data.authorId]"></sd-user-avatar>
                         <div>
-                            <div class="text" sd-comment-text data-name="{{users[item.data.authorId].display_name || users[item.data.authorId].username}}" data-text="{{item.data.msg}}"></div>
+                            <b>{{users[item.data.authorId].display_name}}:</b>
+                            <sd-text-with-mentions message="item.data.msg"></sd-text-with-mentions>
                             <span class="date" sd-absdate datetime="item.data.date"></span>
                         </div>
                     </div>
@@ -21,7 +22,8 @@ <h4 class="label">{{commentObj.fieldName}}</h4>
                             <div class="flex-row sibling-spacer-10">
                                 <sd-user-avatar data-user="users[reply.authorId]"></sd-user-avatar>
                                 <div>
-                                    <div class="text" sd-comment-text data-comment="comment" data-name="{{users[reply.authorId].display_name || users[reply.authorId].username}}" data-text="{{reply.msg}}"></div>
+                                    <b>{{users[reply.authorId].display_name}}:</b>
+                                    <sd-text-with-mentions message="reply.msg"></sd-text-with-mentions>
                                     <span class="date" sd-absdate datetime="reply.date"></span>
                                 </div>
                             </div>

scripts/apps/users/components/TextWithMentions.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 // mentionRegexp matches mentions in the comment body. It captures $1(name), $2(type), $3(id)
 // the format is: @[name](type:id)
@@ -12,23 +11,27 @@ const mentionRegexp = /@\[([^\]]+)\]\((desk|user):([^\)]+)\)/g;
  * @name TextWithMentions
  * @description Displays a text containing mentions.
  */
-export const TextWithMentions: React.StatelessComponent<any> = ({children, ...props}) => {
-    const msg = children;
-    const n = msg.length;
+
+export interface IProps {
+    message: string;
+}
+
+export const TextWithMentions: React.FunctionComponent<IProps> = ({message}) => {
+    const n = message.length;
 
     const r = []; // array of components to render
     let m; // regexp match
     let lastEnd = 0; // end index of last match
 
     do {
-        m = mentionRegexp.exec(msg);
+        m = mentionRegexp.exec(message);
 
         if (m) {
             const [match, name, type, id] = m;
 
             if (lastEnd < m.index) {
                 // push the previous slice of plain text
-                r.push(msg.slice(lastEnd, m.index));
+                r.push(message.slice(lastEnd, m.index));
             }
             if (type === 'user') {
                 // push a user mention
@@ -44,12 +47,8 @@ export const TextWithMentions: React.StatelessComponent<any> = ({children, ...pr
 
     if (lastEnd < n) {
         // push whatever is left
-        r.push(msg.slice(lastEnd, n));
+        r.push(message.slice(lastEnd, n));
     }
 
-    return <div className="text-with-mentions" {...props}>{r}</div>;
-};
-
-TextWithMentions.propTypes = {
-    children: PropTypes.string.isRequired,
+    return <div className="text-with-mentions">{r}</div>;
 };

scripts/core/editor3/components/comments/Comment.tsx

@@ -136,9 +136,7 @@ export class Comment extends React.Component<any, any> {
                                 </div>
                             )
                             : (
-                                <TextWithMentions>
-                                    {this.props.data.msg}
-                                </TextWithMentions>
+                                <TextWithMentions message={this.props.data.msg} />
                             )
                     }
                 </FluidRow>