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

Commit bbe12fe

Browse files
Marc-Andre-RivetMarc-Andre-Rivet
authored
Issue 596 - Add Markdown presentation (#606)
1 parent 898ec9d commit bbe12fe

File tree

27 files changed

+12094
-3776
lines changed

27 files changed

+12094
-3776
lines changed

‎.circleci/config.yml

+2-1
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,8 @@ jobs:
147147
- run:
148148
name: Run visual tests
149149
command: npm run test.visual
150-
150+
- store_artifacts:
151+
path: storybook-static
151152

152153
"node":
153154
docker:

‎.storybook/webpack.config.js

+3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
let babel = require('./babel.config.js');
22
let config = require('./../.config/webpack/base.js')({
33
babel,
4+
ts: {
5+
transpileOnly: true
6+
},
47
preprocessor: {
58
variables: {
69
mode: 'eager'

‎@Types/modules.d.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,14 @@ declare module 'fast-isnumeric' {
1616
}
1717

1818
declare class Remarkable {
19-
constructor();
19+
constructor(options?: any);
2020
render(value: string): any;
2121
}
2222

2323
declare interface RemarkableCtor {
24-
new(): Remarkable;
24+
new(options?: any): Remarkable;
2525
}
2626

2727
declare module 'remarkable' {
2828
export const Remarkable: RemarkableCtor;
29-
}
29+
}

‎CHANGELOG.md

+4
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
44

55
## Unreleased
66

7+
### Added
8+
- [#606](https://github.com/plotly/dash-table/pull/606) Add markdown support for table cells. Cells will be rendered as markdown if the column `presentation` is specified as `markdown`.
9+
- Add highlight.js for syntax highlighting. If `window.hljs` is specified, that will be used for highlighting instead.
10+
711
### Fixed
812
- [#670](https://github.com/plotly/dash-table/pull/670) Fix a bug where `derived_filter_query_structure` was not getting updated properly
913

‎dash_table_base/__init__.py

+29-34
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,35 @@
2828

2929
_this_module = _sys.modules[__name__]
3030

31+
async_resources = [
32+
'export',
33+
'table',
34+
'highlight'
35+
]
36+
37+
_js_dist = []
38+
39+
_js_dist.extend([{
40+
'relative_package_path': 'async~{}.js'.format(async_resource),
41+
'external_url': (
42+
'https://unpkg.com/dash-table@{}'
43+
'/dash_table/async~{}.js'
44+
).format(__version__, async_resource),
45+
'namespace': package_name,
46+
'async': True
47+
} for async_resource in async_resources])
48+
49+
_js_dist.extend([{
50+
'relative_package_path': 'async~{}.js.map'.format(async_resource),
51+
'external_url': (
52+
'https://unpkg.com/dash-table@{}'
53+
'/dash_table/async~{}.js.map'
54+
).format(__version__, async_resource),
55+
'namespace': package_name,
56+
'dynamic': True
57+
} for async_resource in async_resources])
3158

32-
_js_dist = [
59+
_js_dist.extend([
3360
{
3461
'relative_package_path': 'bundle.js',
3562
'external_url': (
@@ -44,40 +71,8 @@
4471
).format(__version__),
4572
'namespace': package_name,
4673
'dynamic': True
47-
},
48-
{
49-
'relative_package_path': 'async~export.js',
50-
'external_url': (
51-
'https://unpkg.com/dash-table@{}/dash_table/async~export.js'
52-
).format(__version__),
53-
'namespace': package_name,
54-
'async': True
55-
},
56-
{
57-
'relative_package_path': 'async~export.js.map',
58-
'external_url': (
59-
'https://unpkg.com/dash-table@{}/dash_table/async~export.js.map'
60-
).format(__version__),
61-
'namespace': package_name,
62-
'dynamic': True
63-
},
64-
{
65-
'relative_package_path': 'async~table.js',
66-
'external_url': (
67-
'https://unpkg.com/dash-table@{}/dash_table/async~table.js'
68-
).format(__version__),
69-
'namespace': package_name,
70-
'async': True
71-
},
72-
{
73-
'relative_package_path': 'async~table.js.map',
74-
'external_url': (
75-
'https://unpkg.com/dash-table@{}/dash_table/async~table.js.map'
76-
).format(__version__),
77-
'namespace': package_name,
78-
'dynamic': True
7974
}
80-
]
75+
])
8176

8277
_css_dist = []
8378

‎demo/AppMode.ts

+23-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as R from 'ramda';
22

33
import Environment from 'core/environment';
44

5-
import { generateMockData, IDataMock, generateSpaceMockData } from './data';
5+
import { generateMockData, IDataMock, generateSpaceMockData, generateMarkdownMockData, generateMixedMarkdownMockData } from './data';
66
import {
77
PropsWithDefaults,
88
ChangeAction,
@@ -19,6 +19,8 @@ export enum AppMode {
1919
Date = 'date',
2020
Default = 'default',
2121
Formatting = 'formatting',
22+
Markdown = 'markdown',
23+
MixedMarkdown = 'mixedmarkdown',
2224
ReadOnly = 'readonly',
2325
SomeReadOnly = 'someReadonly',
2426
ColumnsInSpace = 'columnsInSpace',
@@ -123,6 +125,22 @@ function getDefaultState(
123125
};
124126
}
125127

128+
function getDefaultMarkdownState() {
129+
const state = getDefaultState(generateMarkdownMockData);
130+
state.tableProps.editable = false;
131+
state.tableProps.style_cell = {};
132+
state.tableProps.style_cell_conditional = [];
133+
return state;
134+
}
135+
136+
function getDefaultMixedMarkdownState() {
137+
const state = getDefaultState(generateMixedMarkdownMockData);
138+
state.tableProps.editable = false;
139+
state.tableProps.style_cell = {};
140+
state.tableProps.style_cell_conditional = [];
141+
return state;
142+
}
143+
126144
function getReadonlyState() {
127145
const state = getDefaultState();
128146
state.tableProps.editable = false;
@@ -347,6 +365,10 @@ function getModeState(mode: string | null) {
347365
return getDateState();
348366
case AppMode.Formatting:
349367
return getFormattingState();
368+
case AppMode.Markdown:
369+
return getDefaultMarkdownState();
370+
case AppMode.MixedMarkdown:
371+
return getDefaultMixedMarkdownState();
350372
case AppMode.ReadOnly:
351373
return getReadonlyState();
352374
case AppMode.SomeReadOnly:

‎demo/data.ts

+102
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,108 @@ export const generateMockData = (rows: number) => unpackIntoColumnsAndData([
9393
}
9494
]);
9595

96+
export const generateMarkdownMockData = (rows: number) => unpackIntoColumnsAndData([
97+
{
98+
id: 'markdown-headers',
99+
name: ['', 'Headers'],
100+
presentation: 'markdown',
101+
data: gendata(i => '#'.repeat(i % 6) + ' row ' + i, rows)
102+
},
103+
{
104+
id: 'markdown-italics',
105+
name: ['Emphasis', 'Italics'],
106+
presentation: 'markdown',
107+
data: gendata(i => (i % 2) ? '*' + i + '*' : '_' + i + '_', rows)
108+
},
109+
{
110+
id: 'markdown-links',
111+
name: ['', 'Links'],
112+
presentation: 'markdown',
113+
data: gendata(i => '[Learn about ' + i + '](http://en.wikipedia.org/wiki/' + i + ')', rows)
114+
},
115+
{
116+
id: 'markdown-lists',
117+
name: ['', 'Lists'],
118+
presentation: 'markdown',
119+
data: gendata(i => [
120+
'1. Row number ' + i,
121+
' - subitem ' + i,
122+
' - subsubitem ' + i,
123+
' - subitem two ' + i,
124+
'2. Next row ' + (i + 1)].join('\n'),
125+
rows)
126+
},
127+
{
128+
id: 'markdown-tables',
129+
name: ['', 'Tables'],
130+
presentation: 'markdown',
131+
data: gendata(i => [
132+
'Current | Next',
133+
'--- | ---',
134+
i + ' | ' + (i + 1)].join('\n'),
135+
rows)
136+
},
137+
{
138+
id: 'markdown-quotes',
139+
name: ['', 'Quotes'],
140+
presentation: 'markdown',
141+
data: gendata(i => '> A quote for row number ' + i, rows)
142+
},
143+
{
144+
id: 'markdown-inline-code',
145+
name: ['', 'Inline code'],
146+
presentation: 'markdown',
147+
data: gendata(i => 'This is row `' + i + '` in this table.', rows)
148+
},
149+
{
150+
id: 'markdown-code-blocks',
151+
name: ['', 'Code blocks'],
152+
presentation: 'markdown',
153+
data: gendata(i => [
154+
'```python',
155+
'def hello_table(i=' + i + '):',
156+
' print("hello, " + i)'].join('\n'), rows)
157+
},
158+
{
159+
id: 'markdown-images',
160+
name: ['', 'Images'],
161+
presentation: 'markdown',
162+
data: gendata(i => '![image ' + i + ' alt text](https://dash.plot.ly/assets/images/logo.png)', rows)
163+
}
164+
165+
]);
166+
167+
export const generateMixedMarkdownMockData = (rows: number) => unpackIntoColumnsAndData([
168+
{
169+
id: 'not-markdown-column',
170+
name: ['Not Markdown'],
171+
editable: true,
172+
data: gendata(_ => 'this is not a markdown cell', rows)
173+
},
174+
{
175+
id: 'markdown-column',
176+
name: ['Markdown'],
177+
type: ColumnType.Text,
178+
presentation: 'markdown',
179+
data: gendata(_ => [
180+
'```javascript',
181+
'console.warn("this is a markdown cell")',
182+
'```'].join('\n'), rows)
183+
},
184+
{
185+
id: 'also-not-markdown-column',
186+
name: ['Also Not Markdown'],
187+
editable: false,
188+
data: gendata(i => i, rows)
189+
},
190+
{
191+
id: 'also-also-not-markdown-column',
192+
name: ['Also Also Not Markdown'],
193+
editable: true,
194+
data: gendata(_ => 'this is also also not a markdown cell', rows)
195+
}
196+
]);
197+
96198
export const generateSpaceMockData = (rows: number) => unpackIntoColumnsAndData([
97199
{
98200
id: 'rows',

0 commit comments

Comments
 (0)