Issue 596 - Add Markdown presentation (#606)

plotly · Jan 7, 2020 · bbe12fe · bbe12fe
1 parent 898ec9d
commit bbe12fe
Show file tree

Hide file tree

Showing 27 changed files with 12,094 additions and 3,776 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -147,7 +147,8 @@ jobs:
             - run:
                 name: Run visual tests
                 command: npm run test.visual
-
+            - store_artifacts:
+                path: storybook-static
 
     "node":
         docker:

diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
@@ -1,6 +1,9 @@
 let babel = require('./babel.config.js');
 let config = require('./../.config/webpack/base.js')({
     babel,
+    ts: {
+        transpileOnly: true
+    },
     preprocessor: {
         variables: {
             mode: 'eager'

diff --git a/@Types/modules.d.ts b/@Types/modules.d.ts
@@ -16,14 +16,14 @@ declare module 'fast-isnumeric' {
 }
 
 declare class Remarkable {
-    constructor();
+    constructor(options?: any);
     render(value: string): any;
 }
 
 declare interface RemarkableCtor {
-    new(): Remarkable;
+    new(options?: any): Remarkable;
 }
 
 declare module 'remarkable' {
     export const Remarkable: RemarkableCtor;
-}
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Unreleased
 
+### Added
+- [#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`.
+    - Add highlight.js for syntax highlighting. If `window.hljs` is specified, that will be used for highlighting instead.
+
 ### Fixed
 - [#670](https://github.com/plotly/dash-table/pull/670) Fix a bug where `derived_filter_query_structure` was not getting updated properly
 

diff --git a/dash_table_base/__init__.py b/dash_table_base/__init__.py
@@ -28,8 +28,35 @@
 
 _this_module = _sys.modules[__name__]
 
+async_resources = [
+    'export',
+    'table',
+    'highlight'
+]
+
+_js_dist = []
+
+_js_dist.extend([{
+    'relative_package_path': 'async~{}.js'.format(async_resource),
+    'external_url': (
+        'https://unpkg.com/dash-table@{}'
+        '/dash_table/async~{}.js'
+    ).format(__version__, async_resource),
+    'namespace': package_name,
+    'async': True
+} for async_resource in async_resources])
+
+_js_dist.extend([{
+    'relative_package_path': 'async~{}.js.map'.format(async_resource),
+    'external_url': (
+        'https://unpkg.com/dash-table@{}'
+        '/dash_table/async~{}.js.map'
+    ).format(__version__, async_resource),
+    'namespace': package_name,
+    'dynamic': True
+} for async_resource in async_resources])
 
-_js_dist = [
+_js_dist.extend([
     {
         'relative_package_path': 'bundle.js',
         'external_url': (
@@ -44,40 +71,8 @@
         ).format(__version__),
         'namespace': package_name,
         'dynamic': True
-    },
-    {
-        'relative_package_path': 'async~export.js',
-        'external_url': (
-            'https://unpkg.com/dash-table@{}/dash_table/async~export.js'
-        ).format(__version__),
-        'namespace': package_name,
-        'async': True
-    },
-    {
-        'relative_package_path': 'async~export.js.map',
-        'external_url': (
-            'https://unpkg.com/dash-table@{}/dash_table/async~export.js.map'
-        ).format(__version__),
-        'namespace': package_name,
-        'dynamic': True
-    },
-    {
-        'relative_package_path': 'async~table.js',
-        'external_url': (
-            'https://unpkg.com/dash-table@{}/dash_table/async~table.js'
-        ).format(__version__),
-        'namespace': package_name,
-        'async': True
-    },
-    {
-        'relative_package_path': 'async~table.js.map',
-        'external_url': (
-            'https://unpkg.com/dash-table@{}/dash_table/async~table.js.map'
-        ).format(__version__),
-        'namespace': package_name,
-        'dynamic': True
     }
-]
+])
 
 _css_dist = []
 

diff --git a/demo/AppMode.ts b/demo/AppMode.ts
@@ -2,7 +2,7 @@ import * as R from 'ramda';
 
 import Environment from 'core/environment';
 
-import { generateMockData, IDataMock, generateSpaceMockData } from './data';
+import { generateMockData, IDataMock, generateSpaceMockData, generateMarkdownMockData, generateMixedMarkdownMockData } from './data';
 import {
     PropsWithDefaults,
     ChangeAction,
@@ -19,6 +19,8 @@ export enum AppMode {
     Date = 'date',
     Default = 'default',
     Formatting = 'formatting',
+    Markdown = 'markdown',
+    MixedMarkdown = 'mixedmarkdown',
     ReadOnly = 'readonly',
     SomeReadOnly = 'someReadonly',
     ColumnsInSpace = 'columnsInSpace',
@@ -123,6 +125,22 @@ function getDefaultState(
     };
 }
 
+function getDefaultMarkdownState() {
+    const state = getDefaultState(generateMarkdownMockData);
+    state.tableProps.editable = false;
+    state.tableProps.style_cell = {};
+    state.tableProps.style_cell_conditional = [];
+    return state;
+}
+
+function getDefaultMixedMarkdownState() {
+    const state = getDefaultState(generateMixedMarkdownMockData);
+    state.tableProps.editable = false;
+    state.tableProps.style_cell = {};
+    state.tableProps.style_cell_conditional = [];
+    return state;
+}
+
 function getReadonlyState() {
     const state = getDefaultState();
     state.tableProps.editable = false;
@@ -347,6 +365,10 @@ function getModeState(mode: string | null) {
             return getDateState();
         case AppMode.Formatting:
             return getFormattingState();
+        case AppMode.Markdown:
+            return getDefaultMarkdownState();
+        case AppMode.MixedMarkdown:
+            return getDefaultMixedMarkdownState();
         case AppMode.ReadOnly:
             return getReadonlyState();
         case AppMode.SomeReadOnly:

diff --git a/demo/data.ts b/demo/data.ts
@@ -93,6 +93,108 @@ export const generateMockData = (rows: number) => unpackIntoColumnsAndData([
     }
 ]);
 
+export const generateMarkdownMockData = (rows: number) => unpackIntoColumnsAndData([
+    {
+        id: 'markdown-headers',
+        name: ['', 'Headers'],
+        presentation: 'markdown',
+        data: gendata(i => '#'.repeat(i % 6) + ' row ' + i, rows)
+    },
+    {
+        id: 'markdown-italics',
+        name: ['Emphasis', 'Italics'],
+        presentation: 'markdown',
+        data: gendata(i => (i % 2) ? '*' + i + '*' : '_' + i + '_', rows)
+    },
+    {
+        id: 'markdown-links',
+        name: ['', 'Links'],
+        presentation: 'markdown',
+        data: gendata(i => '[Learn about ' + i + '](http://en.wikipedia.org/wiki/' + i + ')', rows)
+    },
+    {
+        id: 'markdown-lists',
+        name: ['', 'Lists'],
+        presentation: 'markdown',
+        data: gendata(i => [
+            '1. Row number ' + i,
+            '    - subitem ' + i,
+            '      - subsubitem ' + i,
+            '    - subitem two ' + i,
+            '2. Next row ' + (i + 1)].join('\n'),
+            rows)
+    },
+    {
+        id: 'markdown-tables',
+        name: ['', 'Tables'],
+        presentation: 'markdown',
+        data: gendata(i => [
+            'Current | Next',
+            '--- | ---',
+            i + ' | ' + (i + 1)].join('\n'),
+            rows)
+    },
+    {
+        id: 'markdown-quotes',
+        name: ['', 'Quotes'],
+        presentation: 'markdown',
+        data: gendata(i => '> A quote for row number ' + i, rows)
+    },
+    {
+        id: 'markdown-inline-code',
+        name: ['', 'Inline code'],
+        presentation: 'markdown',
+        data: gendata(i => 'This is row `' + i + '` in this table.', rows)
+    },
+    {
+        id: 'markdown-code-blocks',
+        name: ['', 'Code blocks'],
+        presentation: 'markdown',
+        data: gendata(i => [
+            '```python',
+            'def hello_table(i=' + i + '):',
+            '  print("hello, " + i)'].join('\n'), rows)
+    },
+    {
+        id: 'markdown-images',
+        name: ['', 'Images'],
+        presentation: 'markdown',
+        data: gendata(i => '![image ' + i + ' alt text](https://dash.plot.ly/assets/images/logo.png)', rows)
+    }
+
+]);
+
+export const generateMixedMarkdownMockData = (rows: number) => unpackIntoColumnsAndData([
+    {
+        id: 'not-markdown-column',
+        name: ['Not Markdown'],
+        editable: true,
+        data: gendata(_ => 'this is not a markdown cell', rows)
+    },
+    {
+        id: 'markdown-column',
+        name: ['Markdown'],
+        type: ColumnType.Text,
+        presentation: 'markdown',
+        data: gendata(_ => [
+            '```javascript',
+            'console.warn("this is a markdown cell")',
+            '```'].join('\n'), rows)
+    },
+    {
+        id: 'also-not-markdown-column',
+        name: ['Also Not Markdown'],
+        editable: false,
+        data: gendata(i => i, rows)
+    },
+    {
+        id: 'also-also-not-markdown-column',
+        name: ['Also Also Not Markdown'],
+        editable: true,
+        data: gendata(_ => 'this is also also not a markdown cell', rows)
+    }
+]);
+
 export const generateSpaceMockData = (rows: number) => unpackIntoColumnsAndData([
     {
         id: 'rows',