Issue 807 - Customizable Markdown options (plotly#808)

packages/dash-table/CHANGELOG.md

@@ -3,6 +3,11 @@ All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
+### Added
+- [#808](https://github.com/plotly/dash-table/pull/808)Fix a regression introduced with [#787](https://github.com/plotly/dash-table/pull/787) making it impossible to open markdown links in the current tab.
+    - Adds a new `markdown_options` property that supports:
+        - `link_target` nested prop with values `_blank`, `_parent`, `_self`, `_top` or an arbitrary string (default: `_blank`)
+
 ### Fixed
 - [#806](https://github.com/plotly/dash-table/pull/806) Fix a bug where fixed rows a misaligned after navigating or editing cells [#803](https://github.com/plotly/dash-table/issues/803)
 

packages/dash-table/src/core/objPropsToCamel.ts

@@ -0,0 +1,16 @@
+import { reduce, toPairs, assoc } from 'ramda';
+import { toCamelCase } from 'dash-table/derived/style/py2jsCssProperties';
+
+const objPropsToCamel = (value: any): any => (value !== null && typeof value === 'object') ?
+    reduce((
+        acc,
+        [key, pValue]: [string, any]
+    ) => assoc(toCamelCase(key.split('_')), objPropsToCamel(pValue), acc),
+        {} as any,
+        toPairs(value)
+    ) :
+    Array.isArray(value) ?
+        value.map(objPropsToCamel, value) :
+        value;
+
+export default objPropsToCamel;

packages/dash-table/src/dash-table/components/CellFactory.tsx

@@ -4,7 +4,7 @@ import React, { CSSProperties } from 'react';
 import { matrixMap2, matrixMap3 } from 'core/math/matrixZipMap';
 import { arrayMap2 } from 'core/math/arrayZipMap';
 
-import { ICellFactoryProps } from 'dash-table/components/Table/props';
+import { ICellFactoryProps, IMarkdownOptions } from 'dash-table/components/Table/props';
 import derivedCellWrappers from 'dash-table/derived/cell/wrappers';
 import derivedCellContents from 'dash-table/derived/cell/contents';
 import derivedCellOperations from 'dash-table/derived/cell/operations';
@@ -14,6 +14,7 @@ import { derivedRelevantCellStyles } from 'dash-table/derived/style';
 import { IEdgesMatrices } from 'dash-table/derived/edges/type';
 import { memoizeOne } from 'core/memoizer';
 import memoizerCache from 'core/cache/memoizer';
+import Markdown from 'dash-table/utils/Markdown';
 
 export default class CellFactory {
 
@@ -33,6 +34,10 @@ export default class CellFactory {
         private readonly relevantStyles = derivedRelevantCellStyles()
     ) { }
 
+    private getMarkdown = memoizeOne((
+        options: IMarkdownOptions
+    ) => new Markdown(options));
+
     public createCells(dataEdges: IEdgesMatrices | undefined, dataOpEdges: IEdgesMatrices | undefined) {
         const {
             active_cell,
@@ -44,6 +49,7 @@ export default class CellFactory {
             id,
             is_focused,
             loading_state,
+            markdown_options,
             row_deletable,
             row_selectable,
             selected_cells,
@@ -121,13 +127,16 @@ export default class CellFactory {
             selected_cells
         );
 
+        const markdown = this.getMarkdown(markdown_options);
+
         const partialCellContents = this.cellContents.partialGet(
             visibleColumns,
             virtualized.data,
             virtualized.offset,
             !!is_focused,
             dropdowns,
-            loading_state
+            loading_state,
+            markdown
         );
 
         const cellContents = this.cellContents.get(
@@ -139,7 +148,8 @@ export default class CellFactory {
             virtualized.offset,
             !!is_focused,
             dropdowns,
-            loading_state
+            loading_state,
+            markdown
         );
 
         const ops = this.getDataOpCells(

packages/dash-table/src/dash-table/components/CellMarkdown/index.tsx

@@ -11,14 +11,15 @@ interface IProps {
     active: boolean;
     applyFocus: boolean;
     className: string;
+    markdown: Markdown;
     value: any;
 }
 
 export default class CellMarkdown extends PureComponent<IProps, {}> {
 
-    getMarkdown = memoizeOne((value: string, _ready: any) => ({
+    getMarkdown = memoizeOne((value: any, md: Markdown, _ready: any) => ({
         dangerouslySetInnerHTML: {
-            __html: Markdown.render(String(value))
+            __html: md.render(String(value))
         }
     }));
 
@@ -41,13 +42,14 @@ export default class CellMarkdown extends PureComponent<IProps, {}> {
     render() {
         const {
             className,
+            markdown,
             value
         } = this.props;
 
         return (<div
             ref='el'
             className={[className, 'cell-markdown'].join(' ')}
-            {...this.getMarkdown(value, Markdown.isReady)}
+            {...this.getMarkdown(value, markdown, Markdown.isReady)}
         />);
     }
 

packages/dash-table/src/dash-table/components/Table/props.ts

@@ -155,6 +155,10 @@ export interface INumberLocale {
     separate_4digits?: boolean;
 }
 
+export interface IMarkdownOptions {
+    link_target: '_blank' | '_parent' | '_self' | '_top' | string;
+}
+
 export type NumberFormat = ({
     locale: INumberLocale;
     nully: any;
@@ -315,6 +319,7 @@ export interface IProps {
     hidden_columns?: string[];
     include_headers_on_copy_paste?: boolean;
     locale_format: INumberLocale;
+    markdown_options: IMarkdownOptions;
     merge_duplicate_headers?: boolean;
     fixed_columns?: Fixed;
     fixed_rows?: Fixed;
@@ -491,6 +496,7 @@ export interface ICellFactoryProps {
     id: string;
     is_focused?: boolean;
     loading_state: boolean;
+    markdown_options: IMarkdownOptions;
     paginator: IPaginator;
     row_deletable: boolean;
     row_selectable: Selection;

packages/dash-table/src/dash-table/dash/DataTable.js

@@ -70,6 +70,10 @@ export const defaultProps = {
         data: 0
     },
 
+    markdown_options: {
+        link_target: '_blank'
+    },
+
     tooltip: {},
     tooltip_conditional: [],
     tooltip_data: [],
@@ -423,6 +427,24 @@ export const propTypes = {
         separate_4digits: PropTypes.bool
     }),
 
+    /**
+     * The `markdown_options` property allows customization of the markdown cells behavior.
+     *  'link_target': (default: '_blank') the link's behavior (_blank opens the link in a
+     * new tab, _parent opens the link in the parent frame, _self opens the link in the
+     * current tab, and _top opens the link in the top frame) or a string
+     */
+    markdown_options: PropTypes.exact({
+        link_target: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.oneOf([
+                '_blank',
+                '_parent',
+                '_self',
+                '_top'
+            ])
+        ]).isRequired
+    }),
+
     /**
      * The `css` property is a way to embed CSS selectors and rules
      * onto the page.

packages/dash-table/src/dash-table/derived/cell/contents.tsx

@@ -21,6 +21,7 @@ import { memoizeOne } from 'core/memoizer';
 import getFormatter from 'dash-table/type/formatter';
 import { shallowClone } from 'core/math/matrixZipMap';
 import CellMarkdown from 'dash-table/components/CellMarkdown';
+import Markdown from 'dash-table/utils/Markdown';
 
 const mapData = R.addIndex<Datum, JSX.Element[]>(R.map);
 const mapRow = R.addIndex<IColumn, JSX.Element>(R.map);
@@ -68,7 +69,8 @@ class Contents {
         _offset: IViewportOffset,
         isFocused: boolean,
         dropdowns: (IDropdown | undefined)[][],
-        data_loading: boolean
+        data_loading: boolean,
+        markdown: Markdown
     ): JSX.Element[][] => {
         const formatters = R.map(getFormatter, columns);
 
@@ -84,7 +86,8 @@ class Contents {
                     rowIndex,
                     datum,
                     formatters,
-                    data_loading
+                    data_loading,
+                    markdown
                 ), columns), data);
     });
 
@@ -97,7 +100,8 @@ class Contents {
         offset: IViewportOffset,
         isFocused: boolean,
         dropdowns: (IDropdown | undefined)[][],
-        data_loading: boolean
+        data_loading: boolean,
+        markdown: Markdown
     ): JSX.Element[][] => {
         if (!activeCell) {
             return contents;
@@ -124,13 +128,26 @@ class Contents {
             iActive,
             data[i],
             formatters,
-            data_loading
+            data_loading,
+            markdown
         );
 
         return contents;
     });
 
-    private getContent(active: boolean, applyFocus: boolean, isFocused: boolean, column: IColumn, dropdown: IDropdown | undefined, columnIndex: number, rowIndex: number, datum: any, formatters: ((value: any) => any)[], data_loading: boolean) {
+    private getContent(
+        active: boolean,
+        applyFocus: boolean,
+        isFocused: boolean,
+        column: IColumn,
+        dropdown: IDropdown | undefined,
+        columnIndex: number,
+        rowIndex: number,
+        datum: any,
+        formatters: ((value: any) => any)[],
+        data_loading: boolean,
+        markdown: Markdown
+    ) {
 
         const className = [
             ...(active ? ['input-active'] : []),
@@ -139,7 +156,6 @@ class Contents {
         ].join(' ');
 
         const cellType = getCellType(active, column.editable, dropdown && dropdown.options, column.presentation, data_loading);
-
         switch (cellType) {
             case CellType.Dropdown:
                 return (<CellDropdown
@@ -170,6 +186,7 @@ class Contents {
                     active={active}
                     applyFocus={applyFocus}
                     className={className}
+                    markdown={markdown}
                     value={datum[column.id]}
                 />);
             case CellType.DropdownLabel:

packages/dash-table/src/dash-table/derived/style/py2jsCssProperties.ts

@@ -2,7 +2,7 @@ import cssProperties from './cssProperties';
 
 export type StyleProperty = string | number;
 
-const toCamelCase = (fragments: string[]) => fragments.map((f, i) => i ?
+export const toCamelCase = (fragments: string[]) => fragments.map((f, i) => i ?
     f.charAt(0).toUpperCase() + f.substring(1) :
     f
 ).join('');

packages/dash-table/src/dash-table/utils/Markdown.ts

@@ -1,21 +1,11 @@
 import { Remarkable } from 'remarkable';
+import objPropsToCamel from 'core/objPropsToCamel';
 import LazyLoader from 'dash-table/LazyLoader';
+import { IMarkdownOptions } from 'dash-table/components/Table/props';
 
 export default class Markdown {
 
-    static isReady: Promise<boolean> | true = new Promise<boolean>(resolve => {
-        Markdown.hljsResolve = resolve;
-    });
-
-    static render = (value: string) => {
-        return Markdown.md.render(value);
-    }
-
-    private static hljsResolve: () => any;
-
-    private static hljs: any;
-
-    private static readonly md: Remarkable = new Remarkable({
+    private readonly md: Remarkable = new Remarkable({
         highlight: (str: string, lang: string) => {
             if (Markdown.hljs) {
                 if (lang && Markdown.hljs.getLanguage(lang)) {
@@ -32,12 +22,28 @@ export default class Markdown {
             }
             return '';
         },
-        linkTarget:'_blank'
+        ...objPropsToCamel(this.options)
+    });
+
+    constructor(private readonly options: IMarkdownOptions) {
+
+    }
+
+    public render = (value: string) => this.md.render(value);
+
+    public static get isReady() {
+        return Markdown._isReady;
+    }
+
+    private static hljs: any;
+    private static hljsResolve: () => any;
+    private static _isReady: Promise<boolean> | true = new Promise<boolean>(resolve => {
+        Markdown.hljsResolve = resolve;
     });
 
     private static async loadhljs() {
         Markdown.hljs = await LazyLoader.hljs;
         Markdown.hljsResolve();
-        Markdown.isReady = true;
+        Markdown._isReady = true;
     }
 }