Merge pull request #2909 from leeagustin/rehighlight-markdown-update

Rehighlights dcc.Markdown when it is updated

Author: T4rk1n

components/dash-core-components/src/fragments/Markdown.react.js

@@ -32,12 +32,20 @@ export default class DashMarkdown extends Component {
     }
 
     highlightCode() {
+        const isHighlighted = node => {
+            // a highlighted node will have <span> children which are what color the text
+            return node.children.length > 0;
+        };
+
         if (this.mdContainer) {
             const nodes = this.mdContainer.querySelectorAll('pre code');
 
             if (MarkdownHighlighter.hljs) {
                 for (let i = 0; i < nodes.length; i++) {
-                    MarkdownHighlighter.hljs.highlightElement(nodes[i]);
+                    if (!isHighlighted(nodes[i])) {
+                        nodes[i].removeAttribute('data-highlighted');
+                        MarkdownHighlighter.hljs.highlightElement(nodes[i]);
+                    }
                 }
             } else {
                 MarkdownHighlighter.loadhljs();

components/dash-core-components/tests/integration/misc/test_markdown_highlight.py

@@ -4,6 +4,10 @@
 
 
 md_text = """```python
+print('hello, world!')
+```"""
+
+new_md_text = """```python
 import dash
 print('hello, world!')
 ```"""
@@ -46,3 +50,32 @@ def trigger_md_rerender(nclicks):
     dash_dcc.wait_for_text_to_equal("#md-container code", "hljs override")
 
     assert dash_dcc.get_logs() == []
+
+
+def test_msmh003_update_md(dash_dcc):
+    app = Dash(__name__)
+    app.layout = html.Div(
+        [
+            html.Button("Click", id="md-trigger"),
+            dcc.Markdown(md_text, id="md"),
+        ]
+    )
+
+    @app.callback(Output("md", "children"), [Input("md-trigger", "n_clicks")])
+    def update_md(nclicks):
+        if nclicks is not None and nclicks > 0:
+            return new_md_text
+        return md_text
+
+    dash_dcc.start_server(app)
+
+    # a highlighted node will have <span> children which are what color the text
+    code = dash_dcc.wait_for_element("code[data-highlighted='yes']")
+    assert len(code.find_elements_by_tag_name("span")) == 2
+
+    dash_dcc.find_element("#md-trigger").click()
+
+    code = dash_dcc.wait_for_element("code[data-highlighted='yes']")
+    assert len(code.find_elements_by_tag_name("span")) == 3
+
+    assert dash_dcc.get_logs() == []