Skip to content
This repository has been archived by the owner on Jun 4, 2024. It is now read-only.

Allow HTML content in Markdown cells #916

Merged
merged 3 commits into from
Jun 28, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).


### Added
- [#916](https://github.com/plotly/dash-table/pull/916)
- Added `html` option to `markdown_options` prop. This enables the use of html tags in markdown text.

- [#545](https://github.com/plotly/dash-table/issues/545)
- Case insensitive filtering
- New props: `filter_options` - to control case of all filters, `columns.filter_options` - to control filter case for each column
Expand Down
1 change: 1 addition & 0 deletions src/dash-table/components/Table/props.ts
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,7 @@ export interface INumberLocale {

export interface IMarkdownOptions {
link_target: '_blank' | '_parent' | '_self' | '_top' | string;
html?: boolean;
}

export type NumberFormat =
Expand Down
11 changes: 9 additions & 2 deletions src/dash-table/dash/DataTable.js
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,8 @@ export const defaultProps = {
},

markdown_options: {
link_target: '_blank'
link_target: '_blank',
html: false
},

tooltip: {},
Expand Down Expand Up @@ -483,7 +484,13 @@ export const propTypes = {
link_target: PropTypes.oneOfType([
PropTypes.string,
PropTypes.oneOf(['_blank', '_parent', '_self', '_top'])
]).isRequired
]),
/**
* (default: False) If True, html may be used in markdown cells
AnnMarieW marked this conversation as resolved.
Show resolved Hide resolved
* Be careful enabling html if the content being rendered can come
* from an untrusted user, as this may create an XSS vulnerability.
*/
html: PropTypes.bool
}),

/**
Expand Down
38 changes: 38 additions & 0 deletions tests/selenium/test_markdown_html.py
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import dash
from dash_table import DataTable


def get_app(markdown_options):

app = dash.Dash(__name__)

props = dict(
id="table",
columns=[dict(name="a", id="a", type="text", presentation="markdown")],
data=[dict(a="<h1>html h1 heading</h1>")],
)

if markdown_options is not None:
props["markdown_options"] = markdown_options

app.layout = DataTable(**props)

return app


def test_tmdh001_html_not_allowed(test):
test.start_server(get_app(None))

h1_elements = test.find_elements("h1")

assert len(h1_elements) == 0
assert test.get_log_errors() == []


def test_tmdh002_html_allowed(test):
test.start_server(get_app(dict(html=True)))

h1_elements = test.find_elements("h1")

assert len(h1_elements) == 1
assert test.get_log_errors() == []