Bugfix: Fix dcc.Markdown issues with <dccLink />

components/dash-core-components/package.json

@@ -27,7 +27,7 @@
     "build:js": "webpack --mode production",
     "build:backends": "dash-generate-components ./src/components dash_core_components -p package-info.json  && cp dash_core_components_base/** dash_core_components/ && dash-generate-components ./src/components dash_core_components -p package-info.json -k RangeSlider,Slider,Dropdown,RadioItems,Checklist,DatePickerSingle,DatePickerRange,Input,Link --r-prefix 'dcc' --r-suggests 'dash,dashHtmlComponents,jsonlite,plotly' --jl-prefix 'dcc' && black dash_core_components",
     "build": "run-s prepublishOnly build:js build:backends",
-    "postbuild": "es-check es2017 dash_core_components/*.js",
+    "postbuild": "es-check es2018 dash_core_components/*.js",
     "build:watch": "watch 'npm run build' src",
     "format": "run-s private::format.*",
     "lint": "run-s private::lint.*"
@@ -61,10 +61,12 @@
     "react-dropzone": "^4.1.2",
     "react-fast-compare": "^3.2.2",
     "react-input-autosize": "^3.0.0",
-    "react-markdown": "^4.3.1",
+    "react-markdown": "^8.0.7",
     "react-window": "^1.8.11",
-    "remark-math": "^3.0.1",
-    "uniqid": "^5.4.0"
+    "rehype-raw": "^6.1.1",
+    "remark-math": "^5.1.1",
+    "uniqid": "^5.4.0",
+    "unist-util-visit": "^4.1.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.28.6",
@@ -81,6 +83,7 @@
     "@testing-library/react": "^16.3.2",
     "@types/d3-format": "^3.0.4",
     "@types/fast-isnumeric": "^1.1.2",
+    "@types/hast": "^2.3.10",
     "@types/jest": "^29.5.14",
     "@types/js-search": "^1.4.4",
     "@types/ramda": "^0.31.0",
@@ -106,7 +109,6 @@
     "prettier": "^2.8.8",
     "react": "^18",
     "react-dom": "^18",
-    "react-jsx-parser": "2.4.1",
     "rimraf": "^6.1.3",
     "style-loader": "^3.3.3",
     "styled-jsx": "^5.1.7",

components/dash-core-components/src/components/Graph.react.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import {asyncDecorator} from '@plotly/dash-component-plugins';
 import graph from '../utils/LazyLoader/graph';
 import plotly from '../utils/LazyLoader/plotly';
-import lazyLoadMathJax from '../utils/LazyLoader/mathjax';
+import lazyLoadMathJax from '../utils/LazyLoader/third-party/mathjax';
 import {
     privatePropTypes,
     privateDefaultProps,

components/dash-core-components/src/components/Link.tsx

@@ -0,0 +1,74 @@
+import React, {useEffect, useMemo} from 'react';
+import {isNil} from 'ramda';
+
+import LoadingElement from '../utils/_LoadingElement';
+import {LinkProps} from '../types';
+
+type LinkComponentProps = LinkProps & {
+    setProps?: (props: Record<string, unknown>) => void;
+};
+
+/**
+ * Link allows you to create a clickable link within a multi-page app.
+ *
+ * For links with destinations outside the current app, `html.A` is a better
+ * component to use.
+ */
+const Link = ({refresh = false, ...props}: LinkComponentProps) => {
+    const {className, style, id, href, children, title, target, setProps} =
+        props;
+    const cleanUrl = window.dash_clientside.clean_url;
+    const sanitizedUrl = useMemo(() => {
+        return href ? cleanUrl(href) : undefined;
+    }, [href]);
+
+    const updateLocation = (e: React.MouseEvent<HTMLAnchorElement>) => {
+        const hasModifiers = e.metaKey || e.shiftKey || e.altKey || e.ctrlKey;
+
+        if (hasModifiers) {
+            return;
+        }
+        if (target !== '_self' && !isNil(target)) {
+            return;
+        }
+        // prevent anchor from updating location
+        e.preventDefault();
+        if (refresh) {
+            window.location.href = sanitizedUrl as string;
+        } else {
+            window.history.pushState({}, '', sanitizedUrl);
+            window.dispatchEvent(new CustomEvent('_dashprivate_pushstate'));
+        }
+        // scroll back to top
+        window.scrollTo(0, 0);
+    };
+
+    useEffect(() => {
+        if (sanitizedUrl && sanitizedUrl !== href) {
+            setProps?.({
+                _dash_error: new Error(`Dangerous link detected:: ${href}`),
+            });
+        }
+    }, [href, sanitizedUrl]);
+
+    return (
+        <LoadingElement>
+            {loadingProps => (
+                <a
+                    id={id}
+                    className={className}
+                    style={style}
+                    href={sanitizedUrl}
+                    onClick={updateLocation}
+                    title={title}
+                    target={target}
+                    {...loadingProps}
+                >
+                    {isNil(children) ? sanitizedUrl : children}
+                </a>
+            )}
+        </LoadingElement>
+    );
+};
+
+export default Link;