[+] [Fix] [Bug] Dollar sign causing rendering issues

app/components/markdown.tsx

@@ -5,14 +5,15 @@ import RemarkBreaks from "remark-breaks";
 import RehypeKatex from "rehype-katex";
 import RemarkGfm from "remark-gfm";
 import RehypeHighlight from "rehype-highlight";
-import { useRef, useState, RefObject, useEffect } from "react";
+import { useRef, useState, RefObject, useEffect, useMemo } from "react";
 import { copyToClipboard } from "../utils";
 import mermaid from "mermaid";
 
 import LoadingIcon from "../icons/three-dots.svg";
 import React from "react";
 import { useDebouncedCallback, useThrottledCallback } from "use-debounce";
 import { showImageModal } from "./ui-lib";
+import { isIOS, isMacOS } from "../utils"; // Import the isIOS & isMacOS functions from the utils file
 
 export function Mermaid(props: { code: string }) {
   const ref = useRef<HTMLDivElement>(null);
@@ -99,7 +100,55 @@ export function PreCode(props: { children: any }) {
   );
 }
 
+function escapeMarkdownContent(content: string): string {
+  const userAgent = navigator.userAgent.toLowerCase();
+  const isAppleIosDevice = isIOS() || isMacOS(); // Load isAppleDevice from isIOS functions
+  // According to this post: https://www.drupal.org/project/next_webform/issues/3358901
+  // iOS 16.4 is the first version to support lookbehind
+  const iosVersionSupportsLookBehind = 16.4;
+  let doesIosSupportLookBehind = false;
+
+  if (isAppleIosDevice) {
+    const match = /os (\d+([_.]\d+)+)/.exec(userAgent);
+    if (match && match[1]) {
+      const iosVersion = parseFloat(match[1].replace("_", "."));
+      doesIosSupportLookBehind = iosVersion >= iosVersionSupportsLookBehind;
+    }
+  }
+
+  if (isAppleIosDevice && !doesIosSupportLookBehind) {
+    return content.replace(
+      // Exclude code blocks & math block from replacement
+      // custom-regex for unsupported Apple devices
+      /(`{3}[\s\S]*?`{3}|`[^`]*`)|(\$(?!\$))/g,
+      (match, codeBlock) => {
+        if (codeBlock) {
+          return match; // Return the code block as it is
+        } else {
+          return "&#36;"; // Escape dollar signs outside of code blocks
+        }
+      }
+    );
+  } else {
+    return content.replace(
+      // Exclude code blocks & math block from replacement
+      /(`{3}[\s\S]*?`{3}|`[^`]*`)|(?<!\$)(\$(?!\$))/g,
+      (match, codeBlock) => {
+        if (codeBlock) {
+          return match; // Return the code block as it is
+        } else {
+          return "&#36;"; // Escape dollar signs outside of code blocks
+        }
+      }
+    );
+  }
+}
+
 function _MarkDownContent(props: { content: string }) {
+  const escapedContent = useMemo(() => escapeMarkdownContent(props.content), [
+    props.content,
+  ]);
+
   return (
     <ReactMarkdown
       remarkPlugins={[RemarkMath, RemarkGfm, RemarkBreaks]}
@@ -124,7 +173,7 @@ function _MarkDownContent(props: { content: string }) {
         },
       }}
     >
-      {props.content}
+      {escapedContent}
     </ReactMarkdown>
   );
 }