strip out tags in display (#345)

Author: nicolaskruchten

package.json

@@ -22,6 +22,7 @@
     "react-dom": "^16.2.0",
     "react-select": "^1.0.0-rc.10",
     "react-tabs": "^2.2.1",
+    "striptags": "^3.1.1",
     "tinycolor2": "^1.4.1"
   },
   "devDependencies": {

src/components/containers/Fold.js

@@ -4,6 +4,7 @@ import React, {Component} from 'react';
 import classnames from 'classnames';
 import {CloseIcon, AngleDownIcon} from 'plotly-icons';
 import {unpackPlotProps, localize, containerConnectedContextTypes} from 'lib';
+import striptags from 'striptags';
 
 class Fold extends Component {
   constructor(props, context) {
@@ -96,7 +97,7 @@ class Fold extends Component {
         <div className="fold__top__arrow-title">
           {arrowIcon}
           {icon}
-          <div className="fold__top__title">{name}</div>
+          <div className="fold__top__title">{striptags(name)}</div>
         </div>
         {deleteButton(deleteContainer)}
       </div>

src/components/fields/derived.js

@@ -8,6 +8,7 @@ import {
   connectToContainer,
   supplyLayoutPlotProps,
 } from 'lib';
+import striptags from 'striptags';
 
 export const CanvasSize = connectToContainer(UnconnectedNumeric, {
   modifyPlotProps: (props, context, plotProps) => {
@@ -276,7 +277,7 @@ function computeAxesRefOptions(axes) {
     const ax = axes[i];
 
     // checking user data for title avoids default "Click to enter axis title"
-    const label = ax._input.title || ax._id;
+    const label = striptags(ax._input.title || ax._id);
     options[i] = {label, value: ax._id};
   }