fix(videoplayer): add markdown utility to remove html

Author: Anna Wen

packages/react/src/components/LightboxMediaViewer/LightboxMediaViewer.js

@@ -4,8 +4,11 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import {
+  settings as ddsSettings,
+  markdownToHtml,
+} from '@carbon/ibmdotcom-utilities';
 import React, { useEffect, useState } from 'react';
-import { settings as ddsSettings } from '@carbon/ibmdotcom-utilities';
 import { ExpressiveModal } from '../ExpressiveModal';
 import { Image } from '../Image';
 import { ModalBody } from 'carbon-components-react';
@@ -81,7 +84,11 @@ const LightboxMediaViewer = ({ media, ...modalProps }) => {
                     <div
                       data-autoid={`${stablePrefix}--lightbox-media-viewer__content__desc`}
                       className={`${prefix}--lightbox-media-viewer__content__desc`}>
-                      {videoData.description}
+                      {videoData.description &&
+                        markdownToHtml(videoData.description, {
+                          textOnly: true,
+                          cleanString: true,
+                        })}
                     </div>
                   )}
                 </div>

packages/react/src/components/VideoPlayer/VideoPlayer.js

@@ -5,9 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import {
+  settings as ddsSettings,
+  markdownToHtml,
+} from '@carbon/ibmdotcom-utilities';
 import React, { useEffect, useState } from 'react';
 import cx from 'classnames';
-import { settings as ddsSettings } from '@carbon/ibmdotcom-utilities';
 import PropTypes from 'prop-types';
 import { settings } from 'carbon-components';
 import { VideoPlayerAPI } from '@carbon/ibmdotcom-services';
@@ -47,13 +50,6 @@ const VideoPlayer = ({
     customClassName
   );
 
-  let videoDesc = '';
-  if (videoData.description) {
-    videoDesc = videoData.description
-      .replace(/( )/gi, ' ')
-      .replace(/(<([^>]+)>)/gi, '');
-  }
-
   return (
     <div
       aria-label={`${videoData.description} ${videoDuration}`}
@@ -67,7 +63,12 @@ const VideoPlayer = ({
       </div>
       {showDescription && (
         <div className={`${prefix}--video-player__video-description`}>
-          {videoDesc} {videoDuration}
+          {videoData.description &&
+            markdownToHtml(videoData.description, {
+              textOnly: true,
+              cleanString: true,
+            })}
+          {` ${videoDuration}`}
         </div>
       )}
     </div>

packages/utilities/src/utilities/markdownToHtml/markdownToHtml.js

@@ -2,7 +2,7 @@ import { settings } from 'carbon-components';
 const { prefix } = settings;
 
 const _htmlTagRegex = /<.*?>/g;
-const _cleanStringRegex = /\n|\s{2,}/g;
+const _cleanStringRegex = /\n|\s{2,}|(&nbsp;)/g;
 const _italicRegex = /[_*](.*?)[_*]/g;
 const _boldRegex = /[_*]{2}(.*?)[_*]{2}/g;
 const _paraRegex = /\n\n/g;
@@ -58,10 +58,13 @@ function markdownToHtml(
     bold = true,
     useCarbonClasses = true,
     allowHtml = false,
+    cleanString = false,
+    textOnly = false,
   } = {}
 ) {
   let paraList = '';
   let converted = allowHtml ? str : _removeHtmlTags(str);
+  converted = cleanString ? _cleanString(converted) : converted;
   const paras = converted.split(_paraRegex);
 
   paras.map(para => {
@@ -87,7 +90,7 @@ function markdownToHtml(
       });
     }
 
-    paraList += `<p>${para}</p>`;
+    paraList += textOnly ? para : `<p>${para}</p>`;
   });
 
   return paraList;