Refactor markdown syntax highlighting. #720

shammamah-zz · 2019-12-17T19:12:18Z

Closes #713

shammamah-zz · 2019-12-17T19:18:01Z

src/fragments/Markdown.react.js

 import {propTypes, defaultProps} from '../components/Markdown.react';
 import '../components/css/highlight.css';

 export default class DashMarkdown extends Component {
    constructor(props) {
        super(props);
+        /* eslint-disable no-new */


Disabling this error as we really only do want the side-effects of creating a new Highlight object. An alternative is wrapping all of the Highlight code with a function instead of a class.

Can you explain what's happening here?

shammamah-zz · 2019-12-17T19:19:37Z

src/utils/Highlight.js

+    static hljsResolve() {}
+
+    constructor() {
+        if(!Highlight.isReady) {


Put this here to handle the case in which there are multiple dcc.Markdown elements that need syntax highlighting; we won't create new promises for each of them.

shammamah-zz · 2019-12-17T19:21:32Z

third-party/highlight.js

+import highlightjs from 'highlight.js/lib/highlight';
+import 'highlight.js/styles/github.css';
+
+import bash from 'highlight.js/lib/languages/bash';


Using all of the languages that are defined in the old highlight.pack.js file. We might want to standardize this set of languages so that dash-table and dash-core-components support the same languages.

Marc-Andre-Rivet

Needs a changelog entry

Marc-Andre-Rivet · 2019-12-17T21:32:30Z

dash_core_components_base/__init__.py

-    {
-        'relative_package_path': 'highlight.pack.js',
-        'namespace': 'dash_core_components'
-    },


Marc-Andre-Rivet · 2019-12-17T22:03:42Z

src/fragments/Markdown.react.js

+                    MarkdownHighlighter.hljs.highlightBlock(nodes[i]);
+                }
+            } else {
+                MarkdownHighlighter.loadhljs();


I think the existing implementation does not take full advantage of the react-markdown ability to get its renderer overriden -- similarly to https://github.com/plotly/dash-core-components/pull/711/files#diff-5b56ed82805404e28302aef5147d04a2R129 it should be possible to hook up the highlight directly onto the code renderer and simplify this component / usage.

Issue created: #724, will not be addressed as part of this PR.

Marc-Andre-Rivet · 2019-12-19T01:56:19Z

Snapshots involving dcc.Markdown are not consistent with how they were before -- they lack styling. This may be a timing issue or a new bug: https://percy.io/plotly/dash-core-components/builds/3530615/view/215175776/1280?mode=diff&browser=chrome&snapshot=215175776

Would like to see a test similar to what was done with the table. Behavior with and without highlighting override.

shammamah-zz · 2019-12-19T16:32:31Z

@Marc-Andre-Rivet It looks like the Percy diffs are because I am importing a stylesheet from highlight.js that overrides the highlight.css stylesheet we have in this repo, which has styles taken from the arduino-light and monokai stylesheets from the library. (https://github.com/plotly/dash-core-components/blob/dev/src/components/css/highlight.css)

cc @wbrgss as this might be relevant to DDK. For now I've just removed the stylesheet import and it should look the same as before.

wbrgss · 2019-12-19T17:25:43Z

@shammamah I'm actually theming the highlight.css based on the DDK theme. It's in
override-highlight-syntax.css.js (private repo).

Does that make sense? I wonder if I have to increase the specificity of those files' rules given your change.

shammamah-zz · 2019-12-19T17:27:17Z

@wbrgss That makes sense! I have no problem leaving out the highlight.js stylesheet. It should work exactly as before.

Marc-Andre-Rivet · 2019-12-19T19:36:03Z

src/fragments/Markdown.react.js

@@ -2,12 +2,19 @@ import React, {Component} from 'react';
 import {type} from 'ramda';
 import Markdown from 'react-markdown';

+import MarkdownHighlighter from '../utils/MarkdownHighlighter';
 import {propTypes, defaultProps} from '../components/Markdown.react';
 import '../components/css/highlight.css';


If we're to keep this custom css, might as well import it dynamically when we request hljs instead of getting it dynamically with the markdown component.

Marc-Andre-Rivet · 2019-12-20T01:32:47Z

src/utils/MarkdownHighlighter.js

@@ -0,0 +1,18 @@
+import lazyhljs from './LazyLoader/hljs';
+import '../components/css/highlight.css';


Better, than it the Markdown component, but I would push it even further down the stack, right down to src/third-party/highlight.js, that is, load it only if we require highlighting.

Marc-Andre-Rivet · 2019-12-20T01:37:06Z

tests/integration/misc/test_markdown_highlight.py

+    app.layout = html.Div(dcc.Markdown(md_text))
+    dash_dcc.start_server(app)
+
+    dash_dcc.driver.execute_script('window.hljs = {highlightBlock: (block) => {block.innerHTML="hljs override"}};')


Here we assign window.hljs but nothing in this test demonstrate that it is being used / overrides the dcc behavior.
Could we add a dash_dcc.percy_snapshot('<name of snapshot>') or similar to see that the result is what was forced.

Marc-Andre-Rivet · 2019-12-20T04:11:19Z

tests/integration/misc/test_markdown_highlight.py

+    dash_dcc.driver.execute_script('window.hljs = {highlightBlock: (block) => {block.innerHTML="hljs override"}};')
+
+    assert dash_dcc.find_element('code').text == 'hljs override'
+    dash_dcc.percy_snapshot('md_code_highlight_override')


Marc-Andre-Rivet

💃

shammamah-zz requested review from alexcjohnson and Marc-Andre-Rivet as code owners December 17, 2019 19:12

shammamah-zz force-pushed the 713-highlightjs branch from 2c2fc66 to 2e2dffe Compare December 17, 2019 19:16

shammamah-zz commented Dec 17, 2019

View reviewed changes

Shammamah Hossain added 2 commits December 17, 2019 14:20

Refactor markdown syntax highlighting.

9d9aa6e

Disable eslint error.

103fcb5

shammamah-zz force-pushed the 713-highlightjs branch from 2e2dffe to 103fcb5 Compare December 17, 2019 19:20

shammamah-zz commented Dec 17, 2019

View reviewed changes

Shammamah Hossain added 3 commits December 17, 2019 14:22

Merge branch 'dev' into 713-highlightjs

f679951

Fix formatting.

cc70aed

Fix naming and file locations.

6c98c28

Marc-Andre-Rivet reviewed Dec 17, 2019

View reviewed changes

Shammamah Hossain added 3 commits December 17, 2019 17:34

Change MarkdownHighlighter to be an object.

f80bf28

Update CHANGELOG.

b2893ed

Add plugins for async functions.

b679a6a

shammamah-zz force-pushed the 713-highlightjs branch from dddf05a to b679a6a Compare December 18, 2019 16:57

shammamah-zz mentioned this pull request Dec 18, 2019

The native react-markdown code renderer should be used for syntax highlighting customization. #724

Open

Remove github stylesheet.

dff9f8c

Marc-Andre-Rivet reviewed Dec 19, 2019

View reviewed changes

Shammamah Hossain added 4 commits December 19, 2019 14:53

Move highlight stylesheet import.

6bad06d

Merge branch 'dev' into 713-highlightjs

37d34eb

Update hljs lazy loading.

3ca7aa2

Add markdown highlighting test.

a3fb701

Marc-Andre-Rivet reviewed Dec 20, 2019

View reviewed changes

Shammamah Hossain added 2 commits December 19, 2019 23:00

Move stylesheet import to highlight.js.

3ebf656

Add percy snapshot to test and fix window override test.

78aaeda

shammamah-zz force-pushed the 713-highlightjs branch from 9363cb0 to 78aaeda Compare December 20, 2019 04:01

Marc-Andre-Rivet reviewed Dec 20, 2019

View reviewed changes

Shammamah Hossain added 2 commits December 19, 2019 23:37

Change assert to wait_for_text_to_equal.

0fd28a0

Use click to trigger md render in test.

a2ba931

Marc-Andre-Rivet approved these changes Dec 20, 2019

View reviewed changes

shammamah-zz merged commit 39cfdfc into dev Dec 20, 2019

shammamah-zz deleted the 713-highlightjs branch December 20, 2019 16:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor markdown syntax highlighting. #720

Refactor markdown syntax highlighting. #720

shammamah-zz commented Dec 17, 2019 •

edited

Loading

shammamah-zz Dec 17, 2019

Marc-Andre-Rivet Dec 17, 2019

shammamah-zz Dec 17, 2019

shammamah-zz Dec 17, 2019

Marc-Andre-Rivet left a comment

Marc-Andre-Rivet Dec 17, 2019 •

edited

Loading

Marc-Andre-Rivet Dec 17, 2019

Marc-Andre-Rivet Dec 19, 2019

Marc-Andre-Rivet commented Dec 19, 2019

shammamah-zz commented Dec 19, 2019

wbrgss commented Dec 19, 2019

shammamah-zz commented Dec 19, 2019

Marc-Andre-Rivet Dec 19, 2019 •

edited

Loading

Marc-Andre-Rivet Dec 20, 2019 •

edited

Loading

Marc-Andre-Rivet Dec 20, 2019 •

edited

Loading

Marc-Andre-Rivet Dec 20, 2019

Marc-Andre-Rivet left a comment

		@@ -0,0 +1,18 @@
		import lazyhljs from './LazyLoader/hljs';
		import '../components/css/highlight.css';

Refactor markdown syntax highlighting. #720

Refactor markdown syntax highlighting. #720

Conversation

shammamah-zz commented Dec 17, 2019 • edited Loading

shammamah-zz Dec 17, 2019

Choose a reason for hiding this comment

Marc-Andre-Rivet Dec 17, 2019

Choose a reason for hiding this comment

shammamah-zz Dec 17, 2019

Choose a reason for hiding this comment

shammamah-zz Dec 17, 2019

Choose a reason for hiding this comment

Marc-Andre-Rivet left a comment

Choose a reason for hiding this comment

Marc-Andre-Rivet Dec 17, 2019 • edited Loading

Choose a reason for hiding this comment

Marc-Andre-Rivet Dec 17, 2019

Choose a reason for hiding this comment

Marc-Andre-Rivet Dec 19, 2019

Choose a reason for hiding this comment

Marc-Andre-Rivet commented Dec 19, 2019

shammamah-zz commented Dec 19, 2019

wbrgss commented Dec 19, 2019

shammamah-zz commented Dec 19, 2019

Marc-Andre-Rivet Dec 19, 2019 • edited Loading

Choose a reason for hiding this comment

Marc-Andre-Rivet Dec 20, 2019 • edited Loading

Choose a reason for hiding this comment

Marc-Andre-Rivet Dec 20, 2019 • edited Loading

Choose a reason for hiding this comment

Marc-Andre-Rivet Dec 20, 2019

Choose a reason for hiding this comment

Marc-Andre-Rivet left a comment

Choose a reason for hiding this comment

shammamah-zz commented Dec 17, 2019 •

edited

Loading

Marc-Andre-Rivet Dec 17, 2019 •

edited

Loading

Marc-Andre-Rivet Dec 19, 2019 •

edited

Loading

Marc-Andre-Rivet Dec 20, 2019 •

edited

Loading

Marc-Andre-Rivet Dec 20, 2019 •

edited

Loading