fix markdown links and Mustache Tag Replacement (#2780)

* fix markdown links and Mustache Tag Replacement

* run formatting

* rerun jobs

* Update dependencies and fix URL transformation in UsePropertyReplacement hook

- Downgraded `remark-gfm` from version 4.0.1 to 3.0.1 in both `package.json` and `package-lock.json`.
- Updated `@types/mdast` from version 4.0.4 to 3.0.15 and adjusted related dependencies.
- Modified the URL transformation logic in `UsePropertyReplacement.js` to change the behavior of `replacePropertyTags` from false to true.

Author: CollinBeczak

package-lock.json

@@ -95,6 +95,7 @@
     "react-leaflet": "^3.2.5",
     "react-leaflet-bing-v2": "^5.2.3",
     "react-leaflet-markercluster": "^4.2.1",
+    "react-markdown": "^8.0.7",
     "react-onclickoutside": "^6.6.3",
     "react-popper": "^2.2.4",
     "react-query": "^3.34.2",
@@ -108,7 +109,7 @@
     "react-tagsinput": "^3.19.0",
     "redux": "^4.1.2",
     "redux-thunk": "^2.4.0",
-    "react-markdown": "^8.0.7",
+    "remark-gfm": "^3.0.1",
     "route-matcher": "^0.1.0",
     "sass": "^1.69.5",
     "stale-lru-cache": "^5.1.1",

package.json

@@ -165,6 +165,8 @@ export class CardChallenge extends Component {
             <div className="mr-card-challenge__description">
               <MarkdownContent
                 markdown={this.props.challenge.description || this.props.challenge.blurb}
+                allowPropertyReplacement
+                allowShortCodes
               />
             </div>
 

src/components/CardChallenge/CardChallenge.jsx

@@ -351,7 +351,11 @@ export class ChallengeDetail extends Component {
                 this.state.showMore ? "mr-max-h-full" : ""
               }`}
             >
-              <MarkdownContent markdown={challenge.description || challenge.blurb} />
+              <MarkdownContent
+                markdown={challenge.description || challenge.blurb}
+                allowPropertyReplacement
+                allowShortCodes
+              />
             </div>
             {this.state.hasOverflow && (
               <button

src/components/ChallengeDetail/ChallengeDetail.jsx

@@ -137,7 +137,12 @@ export class ChallengeResultItem extends Component {
                   </span>
                 </div>
               )}
-              <MarkdownContent markdown={this.props.challenge.description} lightMode={false} />
+              <MarkdownContent
+                markdown={this.props.challenge.description}
+                allowPropertyReplacement
+                allowShortCodes
+                lightMode={false}
+              />
               <div>
                 <button
                   type="button"

src/components/ChallengePane/ChallengeResultItem/ChallengeResultItem.jsx

@@ -1,6 +1,7 @@
 import classNames from "classnames";
 import PropTypes from "prop-types";
 import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import usePropertyReplacement from "../../hooks/UsePropertyReplacement/UsePropertyReplacement";
 import { processTextContent } from "../../services/Templating/Templating";
 
@@ -47,10 +48,10 @@ const MarkdownContent = ({
 
       return <Component {...componentProps}>{processedChildren}</Component>;
     };
-
   return (
     <div className={classNames("mr-markdown", { "mr-markdown--compact": compact }, className)}>
       <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
         components={{
           a: ({ _node, ...linkProps }) => (
             <a {...linkProps} target="_blank" rel="nofollow noreferrer" />

src/components/MarkdownContent/MarkdownContent.jsx

@@ -45,6 +45,8 @@ export default class MobileTaskDetails extends Component {
           <div className="mobile-task-details__info__description">
             <MarkdownContent
               markdown={this.props.task.parent.description || this.props.task.parent.blurb}
+              allowPropertyReplacement
+              allowShortCodes
             />
           </div>
         </div>

src/components/TaskPane/MobileTaskDetails/MobileTaskDetails.jsx

@@ -119,7 +119,11 @@ const ChallengeItem = (props) => {
         <FormattedDate value={parseISO(props.challenge.created)} />
       </div>
       <div className="mr-text-white mr-break-words">
-        <MarkdownContent markdown={props.challenge.description} />
+        <MarkdownContent
+          markdown={props.challenge.description}
+          allowPropertyReplacement
+          allowShortCodes
+        />
       </div>
     </li>
   );