Fix #4052

Author: kkartunov

src/shared/components/Contentful/Article/Article.jsx

@@ -8,6 +8,8 @@ import PT from 'prop-types';
 import { fixStyle } from 'utils/contentful';
 import { getService } from 'services/contentful';
 import MarkdownRenderer from 'components/MarkdownRenderer';
+import ReactDOMServer from 'react-dom/server';
+import markdown from 'utils/markdown';
 import ContentfulLoader from 'containers/ContentfulLoader';
 import LoadingIndicator from 'components/LoadingIndicator';
 import YouTubeVideo from 'components/YouTubeVideo';
@@ -21,6 +23,8 @@ import UserDefault from 'assets/images/ico-user-default.svg';
 import ReadMoreArrow from 'assets/images/read-more-arrow.svg';
 import qs from 'qs';
 
+const htmlToText = require('html-to-text');
+
 // character length for the content preview
 const CONTENT_PREVIEW_LENGTH = 110;
 // Votes local storage key
@@ -254,7 +258,17 @@ export default class Article extends React.Component {
                       </h3>
                       <div className={theme.recommendedCardContent}>
                         {
-                          `${subData.entries.items[rec.sys.id].fields.content.substring(0, CONTENT_PREVIEW_LENGTH)}..`
+                          `${htmlToText.fromString(
+                            ReactDOMServer.renderToString(markdown(
+                              subData.entries.items[rec.sys.id].fields.content,
+                            )),
+                            {
+                              ignoreHref: true,
+                              ignoreImage: true,
+                              singleNewLineParagraphs: true,
+                              uppercaseHeadings: false,
+                            },
+                          ).substring(0, CONTENT_PREVIEW_LENGTH)}...`
                         }
                       </div>
                       {

src/shared/components/Contentful/ArticleCard/ArticleCard.jsx

@@ -12,6 +12,7 @@ import React from 'react';
 import { themr } from 'react-css-super-themr';
 import { config } from 'topcoder-react-utils';
 import markdown from 'utils/markdown';
+import ReactDOMServer from 'react-dom/server';
 // SVG assets
 import ThumbUpIcon from 'assets/images/ico-thumb-up.svg';
 import CommentIcon from 'assets/images/ico-comment.svg';
@@ -21,17 +22,18 @@ import PlayIcon from 'assets/images/ico-play.svg';
 import ReadMoreArrow from 'assets/images/read-more-arrow.svg';
 import qs from 'qs';
 
+const htmlToText = require('html-to-text');
+
 // date/time format to use for the creation date
 const FORMAT = 'MMM DD, YYYY';
 // date/time format for 'Forum post' cards is different from others
 const FORUM_POST_FORMAT = 'MMM DD, YYYY [at] h:mm A';
 // max length for the title of the 'Article small' cards
 const ART_SMALL_TITLE_MAX_LENGTH = 29;
-// character length for the content preview
-const CONTENT_PREVIEW_LENGTH = 110;
 // Article large card 'breakpoint'
 const ARTICLE_LARGE_BREAKPOINT = 473;
-
+// character length for the content preview
+const CONTENT_PREVIEW_LENGTH = 110;
 
 class ArticleCard extends React.Component {
   constructor(props) {
@@ -132,10 +134,16 @@ class ArticleCard extends React.Component {
       : article.title;
 
     // truncate content for 'Article large' cards
-    const content = (
-      (themeName === 'Article large' || themeName === 'Recommended')
-      && article.content.length > CONTENT_PREVIEW_LENGTH)
-      ? markdown(`${article.content.substring(0, CONTENT_PREVIEW_LENGTH)}...`)
+    const content = themeName === 'Article large' || themeName === 'Recommended'
+      ? `${htmlToText.fromString(
+        ReactDOMServer.renderToString(markdown(article.content)),
+        {
+          ignoreHref: true,
+          ignoreImage: true,
+          singleNewLineParagraphs: true,
+          uppercaseHeadings: false,
+        },
+      ).substring(0, CONTENT_PREVIEW_LENGTH)}...`
       : undefined;
 
     // set the correct format to apply to the `article.creationDate`