Migrate Table visualization to React Part 1: Renderer

client/app/assets/less/inc/ant-variables.less

@@ -19,6 +19,12 @@
 @font-size-base:                       13px;
 
 
+/* --------------------------------------------------------
+    Borders
+-----------------------------------------------------------*/
+@border-color-split:                   #f0f0f0;
+
+
 /* --------------------------------------------------------
     Typograpgy
 -----------------------------------------------------------*/
@@ -77,4 +83,4 @@
     Notification
 -----------------------------------------------------------*/
 @notification-padding: @notification-padding-vertical 48px @notification-padding-vertical 17px;
-@notification-width: auto;
+@notification-width: auto;

client/app/components/HtmlContent.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { $sanitize } from '@/services/ng';
+
+export default function HtmlContent({ children, ...props }) {
+  return (
+    <div
+      {...props}
+      dangerouslySetInnerHTML={{ __html: $sanitize(children) }} // eslint-disable-line react/no-danger
+    />
+  );
+}
+
+HtmlContent.propTypes = {
+  children: PropTypes.string,
+};
+
+HtmlContent.defaultProps = {
+  children: '',
+};

client/app/components/dashboards/TextboxDialog.jsx

@@ -6,6 +6,7 @@ import Modal from 'antd/lib/modal';
 import Input from 'antd/lib/input';
 import Tooltip from 'antd/lib/tooltip';
 import Divider from 'antd/lib/divider';
+import HtmlContent from '@/components/HtmlContent';
 import { wrap as wrapDialog, DialogPropType } from '@/components/DialogWrapper';
 import notification from '@/services/notification';
 
@@ -100,10 +101,7 @@ class TextboxDialog extends React.Component {
             <React.Fragment>
               <Divider dashed />
               <strong className="preview-title">Preview:</strong>
-              <p
-                dangerouslySetInnerHTML={{ __html: this.state.preview }} // eslint-disable-line react/no-danger
-                className="preview markdown"
-              />
+              <HtmlContent className="preview markdown">{this.state.preview}</HtmlContent>
             </React.Fragment>
           )}
         </div>