diff --git a/scripts/apps/authoring/authoring/index.ts b/scripts/apps/authoring/authoring/index.ts
index bc05149663..db7fc8d05c 100644
--- a/scripts/apps/authoring/authoring/index.ts
+++ b/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)
diff --git a/scripts/apps/authoring/track-changes/views/inline-comments-widget.html b/scripts/apps/authoring/track-changes/views/inline-comments-widget.html
index 69d5e4ea28..7f186212b5 100644
--- a/scripts/apps/authoring/track-changes/views/inline-comments-widget.html
+++ b/scripts/apps/authoring/track-changes/views/inline-comments-widget.html
@@ -11,7 +11,8 @@
{{commentObj.fieldName}}
-
+
{{users[item.data.authorId].display_name}}:
+
@@ -21,7 +22,8 @@ {{commentObj.fieldName}}
-
+
{{users[reply.authorId].display_name}}:
+
diff --git a/scripts/apps/users/components/TextWithMentions.tsx b/scripts/apps/users/components/TextWithMentions.tsx
index 07a8839383..ddcee89b5e 100644
--- a/scripts/apps/users/components/TextWithMentions.tsx
+++ b/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 = ({children, ...props}) => {
- const msg = children;
- const n = msg.length;
+
+export interface IProps {
+ message: string;
+}
+
+export const TextWithMentions: React.FunctionComponent = ({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 = ({children, ...pr
if (lastEnd < n) {
// push whatever is left
- r.push(msg.slice(lastEnd, n));
+ r.push(message.slice(lastEnd, n));
}
- return {r}
;
-};
-
-TextWithMentions.propTypes = {
- children: PropTypes.string.isRequired,
+ return {r}
;
};
diff --git a/scripts/core/editor3/components/comments/Comment.tsx b/scripts/core/editor3/components/comments/Comment.tsx
index 8792c5c0b0..bf2492e4f1 100644
--- a/scripts/core/editor3/components/comments/Comment.tsx
+++ b/scripts/core/editor3/components/comments/Comment.tsx
@@ -136,9 +136,7 @@ export class Comment extends React.Component {
)
: (
-
- {this.props.data.msg}
-
+
)
}