+
+ {renderMarkdown(textProp ?? '')}
+
+
+ )}
+ {children};
+ }
+ return `; report which (if either) an element is.
+function mathKind(node: Element): 'inline' | 'display' | null {
+ const className = node.properties?.className;
+ if (Array.isArray(className)) {
+ if (className.includes('math-inline')) {
+ return 'inline';
+ }
+ if (className.includes('math-display')) {
+ return 'display';
+ }
+ }
+ return null;
+}
+
+/**
+ * Routes both math sources into the Math component as `` elements:
+ * - Markdown `$...$` parsed by remark-math (as `.math-inline`/`.math-display`).
+ * - raw-HTML `$...$`, rewritten in place before rehype-raw runs.
+ *
+ * in markdown: Euler: $e=mc^2$
+ * transformed: Euler: e=mc^2
+ */
+const rehypeDashMath: Plugin<[], Root> = () => tree => {
+ visit(tree, node => {
+ if (node.type === 'raw') {
+ const raw = node as unknown as {value: string};
+ raw.value = rewriteRawMath(raw.value);
+ return;
+ }
+ if (node.type === 'element') {
+ const kind = mathKind(node);
+ if (kind) {
+ node.tagName = 'dashmathjax';
+ node.properties = {
+ inline: kind === 'inline' ? 'true' : 'false',
+ };
+ }
+ }
+ });
+};
+
+export default rehypeDashMath;
diff --git a/components/dash-core-components/src/utils/markdown/plugins/rehypeDccComponents.ts b/components/dash-core-components/src/utils/markdown/plugins/rehypeDccComponents.ts
new file mode 100644
index 0000000000..b4aa4f3d54
--- /dev/null
+++ b/components/dash-core-components/src/utils/markdown/plugins/rehypeDccComponents.ts
@@ -0,0 +1,33 @@
+import type {Plugin} from 'unified';
+import type {Root} from 'hast';
+import {visit} from 'unist-util-visit';
+
+const DCC_ALLOWED_TAGS_LOWERCASE = ['dcclink', 'dccmarkdown'];
+
+/**
+ * Renders supported dash components according to the allowlist.
+ * Slightly obscure because HTML on its own ignores the self-closing `/>` form
+ * of custom tags, so we correct for that here:
+ *
+ * in markdown: Click for info
+ * corrected here: Click 
'], dangerously_allow_html=True
+ [''],
+ dangerously_allow_html=True,
+ id="img_html",
),
html.Div("Markdown img - requires dangerously_allow_html"),
- dcc.Markdown(['']),
+ dcc.Markdown([''], id="img_no_html"),
]
)
dash_dcc.start_server(app)
+
+ # With dangerously_allow_html the raw ![]()
renders as a real image.
+ img = dash_dcc.wait_for_element("#img_html img")
+ assert img.get_attribute("src").endswith("assets/image.png")
+
+ # Without it, the raw HTML is inert - no ![]()
element is created.
+ dash_dcc.wait_for_no_elements("#img_no_html img")
+
dash_dcc.percy_snapshot("mkdw001 - image display")
assert dash_dcc.get_logs() == []
@@ -29,11 +52,12 @@ def test_mkdw002_dcclink(dash_dcc):
app.layout = html.Div(
[
html.Div(["Markdown link"]),
- dcc.Markdown(["[Title](title_crumb)"]),
+ dcc.Markdown(["[Title](title_crumb)"], id="md_link"),
html.Div(["Markdown dccLink"]),
dcc.Markdown(
['![]()
nested inside the link renders an ![]()
, not href text.
+ dash_dcc.wait_for_element("#dcclink_nested_img a img")
+
+ # A nested dccMarkdown renders its markdown (an ) inside the link.
+ dash_dcc.wait_for_text_to_equal("#dcclink_nested_md a h2", "Title")
+
+ # A nested dccMarkdown image renders an
'], dangerously_allow_html=True
+ [''],
+ dangerously_allow_html=True,
+ id="img_html",
),
html.Div("Markdown img - requires dangerously_allow_html"),
- dcc.Markdown(['']),
+ dcc.Markdown([''], id="img_no_html"),
]
)
dash_dcc.start_server(app)
+
+ # With dangerously_allow_html the raw