Merge pull request #2043 from nickmelnikov82/fix-markdown-mathjax-in-html

Fix markdown mathjax in html

Author: alexcjohnson

Diff for: CHANGELOG.md

@@ -2,6 +2,14 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
+## [Unreleased]
+
+### Fixed
+
+- [#2043](https://github.com/plotly/dash/pull/2043) Fix bug 
+[#2003](https://github.com/plotly/dash/issues/2003) in which 
+`dangerously_allow_html=True` + `mathjax=True` works in some cases, and in some cases not.
+
 ## [2.4.1] - 2022-05-11
 
 ### Fixed

Diff for: components/dash-core-components/src/fragments/Markdown.react.js

@@ -108,6 +108,20 @@ export default class DashMarkdown extends Component {
                     )}
                 />
             ),
+            dashMathjax: props => (
+                <Math tex={props.value} inline={props.inline} />
+            ),
+        };
+
+        const regexMath = value => {
+            const newValue = value.replace(
+                /(\${1,2})((?:\\.|[^$])+)\1/g,
+                function (m, tag, src) {
+                    const inline = tag.length === 1 || src.indexOf('\n') === -1;
+                    return `<dashMathjax value='${src}' inline='${inline}'/>`;
+                }
+            );
+            return newValue;
         };
 
         return (
@@ -151,7 +165,11 @@ export default class DashMarkdown extends Component {
                                 props.value
                             ) : (
                                 <JsxParser
-                                    jsx={props.value}
+                                    jsx={
+                                        mathjax
+                                            ? regexMath(props.value)
+                                            : props.value
+                                    }
                                     components={componentTransforms}
                                     renderInWrapper={false}
                                 />

Diff for: components/dash-core-components/tests/integration/markdown/test_markdown.py

@@ -388,3 +388,43 @@ def test_mkdw009_target_blank_links(dash_dcc):
     dash_dcc.find_element("a").click()
 
     until(lambda: len(dash_dcc.driver.window_handles) == 2, timeout=1)
+
+
+def test_mkdw010_mathjax_with_html(dash_dcc):
+
+    app = Dash(__name__)
+
+    CONTENT = [
+        """
+    <details>
+        <summary>Topic</summary>
+        Some details
+    </details>
+
+    $E = mc^2$
+    """,
+        """
+    <p>Some paragraph</p>
+
+    $E = mc^2$
+    """,
+        """
+    <p>Some paragraph</p>
+    $E = mc^2$
+    """,
+        """
+    <p>Some paragraph</p> $E = mc^2$
+    """,
+        """
+    <p>Some paragraph with $E = mc^2$ inline math</p>
+    """,
+    ]
+
+    app.layout = html.Div(
+        [dcc.Markdown(c, dangerously_allow_html=True, mathjax=True) for c in CONTENT]
+    )
+
+    dash_dcc.start_server(app)
+
+    dash_dcc.wait_for_element(".MathJax")
+    assert len(dash_dcc.find_elements((".MathJax"))) == len(CONTENT)