@jbrowse/plugin-config 1.7.8 → 1.7.11

package/dist/ConfigurationEditorWidget/components/CodeEditor.js

@@ -31,19 +31,22 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var fontSize = '12px'; // Optimize by using system default fonts: https://css-tricks.com/snippets/css/font-stacks/
 
 var fontFamily = 'Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace';
-var useStyles = (0, _core.makeStyles)({
-  callbackEditor: {
-    fontFamily: fontFamily,
-    fontSize: fontSize,
-    overflowX: 'auto',
-    marginTop: '16px',
-    borderBottom: '1px solid rgba(0,0,0,0.42)'
-  },
-  syntaxHighlighter: {
-    margin: 0,
-    fontFamily: fontFamily,
-    fontSize: fontSize
-  }
+var useStyles = (0, _core.makeStyles)(function (theme) {
+  return {
+    callbackEditor: {
+      fontFamily: fontFamily,
+      fontSize: fontSize,
+      background: theme.palette.background.default,
+      overflowX: 'auto',
+      marginTop: '16px',
+      border: '1px solid rgba(0,0,0,0.42)'
+    },
+    syntaxHighlighter: {
+      margin: 0,
+      fontFamily: fontFamily,
+      fontSize: fontSize
+    }
+  };
 }); // eslint-disable-next-line react/prop-types
 
 function CodeEditor(_ref) {

package/dist/ConfigurationEditorWidget/components/SlotEditor.js

@@ -11,6 +11,8 @@ exports.useSlotEditorStyles = exports.default = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _mobxReact = require("mobx-react");
@@ -29,6 +31,8 @@ var _Add = _interopRequireDefault(require("@material-ui/icons/Add"));
 
 var _RadioButtonUnchecked = _interopRequireDefault(require("@material-ui/icons/RadioButtonUnchecked"));
 
+var _StringArrayEditor = _interopRequireDefault(require("./StringArrayEditor"));
+
 var _CallbackEditor = _interopRequireDefault(require("./CallbackEditor"));
 
 var _ColorEditor = _interopRequireDefault(require("./ColorEditor"));
@@ -41,13 +45,27 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 // icons
 // locals
+// adds ability to have html in helperText. note that FormHelperTextProps is
+// div because the default is p which does not like div children
+var MyTextField = function MyTextField(props) {
+  // eslint-disable-next-line react/prop-types
+  var helperText = props.helperText;
+  return /*#__PURE__*/_react.default.createElement(_core.TextField, (0, _extends2.default)({}, props, {
+    helperText: /*#__PURE__*/_react.default.createElement(_ui.SanitizedHTML, {
+      html: helperText
+    }),
+    FormHelperTextProps: {
+      component: 'div'
+    },
+    fullWidth: true
+  }));
+};
+
 var StringEditor = (0, _mobxReact.observer)(function (_ref) {
   var slot = _ref.slot;
-  return /*#__PURE__*/_react.default.createElement(_core.TextField, {
-    label: slot.name // error={filterError}
-    ,
+  return /*#__PURE__*/_react.default.createElement(MyTextField, {
+    label: slot.name,
     helperText: slot.description,
-    fullWidth: true,
     value: slot.value,
     onChange: function onChange(evt) {
       return slot.set(evt.target.value);
@@ -59,7 +77,6 @@ var TextEditor = (0, _mobxReact.observer)(function (_ref2) {
   return /*#__PURE__*/_react.default.createElement(_core.TextField, {
     label: slot.name,
     helperText: slot.description,
-    fullWidth: true,
     multiline: true,
     value: slot.value,
     onChange: function onChange(evt) {
@@ -74,59 +91,6 @@ var SvgCheckbox = function SvgCheckbox() {
   }));
 };
 
-var StringArrayEditor = (0, _mobxReact.observer)(function (_ref3) {
-  var slot = _ref3.slot;
-
-  var _useState = (0, _react.useState)(''),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, slot.name ? /*#__PURE__*/_react.default.createElement(_core.InputLabel, null, slot.name) : null, /*#__PURE__*/_react.default.createElement(_core.List, {
-    disablePadding: true
-  }, slot.value.map(function (val, idx) {
-    return /*#__PURE__*/_react.default.createElement(_core.ListItem, {
-      key: idx,
-      disableGutters: true
-    }, /*#__PURE__*/_react.default.createElement(_core.TextField, {
-      value: val,
-      onChange: function onChange(evt) {
-        return slot.setAtIndex(idx, evt.target.value);
-      },
-      InputProps: {
-        endAdornment: /*#__PURE__*/_react.default.createElement(_core.InputAdornment, {
-          position: "end"
-        }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-          color: "secondary",
-          onClick: function onClick() {
-            return slot.removeAtIndex(idx);
-          }
-        }, /*#__PURE__*/_react.default.createElement(_Delete.default, null)))
-      }
-    }));
-  }), /*#__PURE__*/_react.default.createElement(_core.ListItem, {
-    disableGutters: true
-  }, /*#__PURE__*/_react.default.createElement(_core.TextField, {
-    value: value,
-    placeholder: "add new",
-    onChange: function onChange(event) {
-      return setValue(event.target.value);
-    },
-    InputProps: {
-      endAdornment: /*#__PURE__*/_react.default.createElement(_core.InputAdornment, {
-        position: "end"
-      }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-        onClick: function onClick() {
-          slot.add(value);
-          setValue('');
-        },
-        disabled: value === '',
-        color: "secondary",
-        "data-testid": "stringArrayAdd-".concat(slot.name)
-      }, /*#__PURE__*/_react.default.createElement(_Add.default, null)))
-    }
-  }))), /*#__PURE__*/_react.default.createElement(_core.FormHelperText, null, slot.description));
-});
 var useMapEditorStyles = (0, _core.makeStyles)(function (theme) {
   return {
     card: {
@@ -134,19 +98,19 @@ var useMapEditorStyles = (0, _core.makeStyles)(function (theme) {
     }
   };
 });
-var StringArrayMapEditor = (0, _mobxReact.observer)(function (_ref4) {
-  var slot = _ref4.slot;
+var StringArrayMapEditor = (0, _mobxReact.observer)(function (_ref3) {
+  var slot = _ref3.slot;
   var classes = useMapEditorStyles();
 
-  var _useState3 = (0, _react.useState)(''),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      value = _useState4[0],
-      setValue = _useState4[1];
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.InputLabel, null, slot.name), Array.from(slot.value, function (_ref5) {
-    var _ref6 = (0, _slicedToArray2.default)(_ref5, 2),
-        key = _ref6[0],
-        val = _ref6[1];
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.InputLabel, null, slot.name), Array.from(slot.value, function (_ref4) {
+    var _ref5 = (0, _slicedToArray2.default)(_ref4, 2),
+        key = _ref5[0],
+        val = _ref5[1];
 
     return /*#__PURE__*/_react.default.createElement(_core.Card, {
       raised: true,
@@ -160,7 +124,7 @@ var StringArrayMapEditor = (0, _mobxReact.observer)(function (_ref4) {
           return slot.remove(key);
         }
       }, /*#__PURE__*/_react.default.createElement(_Delete.default, null))
-    }), /*#__PURE__*/_react.default.createElement(_core.CardContent, null, /*#__PURE__*/_react.default.createElement(StringArrayEditor, {
+    }), /*#__PURE__*/_react.default.createElement(_core.CardContent, null, /*#__PURE__*/_react.default.createElement(_StringArrayEditor.default, {
       slot: {
         value: val,
         description: "Values associated with entry ".concat(key),
@@ -202,19 +166,19 @@ var StringArrayMapEditor = (0, _mobxReact.observer)(function (_ref4) {
     })
   })), /*#__PURE__*/_react.default.createElement(_core.FormHelperText, null, slot.description));
 });
-var NumberMapEditor = (0, _mobxReact.observer)(function (_ref7) {
-  var slot = _ref7.slot;
+var NumberMapEditor = (0, _mobxReact.observer)(function (_ref6) {
+  var slot = _ref6.slot;
   var classes = useMapEditorStyles();
 
-  var _useState5 = (0, _react.useState)(''),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      value = _useState6[0],
-      setValue = _useState6[1];
+  var _useState3 = (0, _react.useState)(''),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      value = _useState4[0],
+      setValue = _useState4[1];
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.InputLabel, null, slot.name), Array.from(slot.value, function (_ref8) {
-    var _ref9 = (0, _slicedToArray2.default)(_ref8, 2),
-        key = _ref9[0],
-        val = _ref9[1];
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.InputLabel, null, slot.name), Array.from(slot.value, function (_ref7) {
+    var _ref8 = (0, _slicedToArray2.default)(_ref7, 2),
+        key = _ref8[0],
+        val = _ref8[1];
 
     return /*#__PURE__*/_react.default.createElement(_core.Card, {
       raised: true,
@@ -263,13 +227,13 @@ var NumberMapEditor = (0, _mobxReact.observer)(function (_ref7) {
     })
   })), /*#__PURE__*/_react.default.createElement(_core.FormHelperText, null, slot.description));
 });
-var NumberEditor = (0, _mobxReact.observer)(function (_ref10) {
-  var slot = _ref10.slot;
+var NumberEditor = (0, _mobxReact.observer)(function (_ref9) {
+  var slot = _ref9.slot;
 
-  var _useState7 = (0, _react.useState)(slot.value),
-      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      val = _useState8[0],
-      setVal = _useState8[1];
+  var _useState5 = (0, _react.useState)(slot.value),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      val = _useState6[0],
+      setVal = _useState6[1];
 
   (0, _react.useEffect)(function () {
     var num = parseFloat(val, 10);
@@ -280,7 +244,7 @@ var NumberEditor = (0, _mobxReact.observer)(function (_ref10) {
       slot.reset();
     }
   }, [slot, val]);
-  return /*#__PURE__*/_react.default.createElement(_core.TextField, {
+  return /*#__PURE__*/_react.default.createElement(MyTextField, {
     label: slot.name,
     helperText: slot.description,
     value: val,
@@ -290,13 +254,13 @@ var NumberEditor = (0, _mobxReact.observer)(function (_ref10) {
     }
   });
 });
-var IntegerEditor = (0, _mobxReact.observer)(function (_ref11) {
-  var slot = _ref11.slot;
+var IntegerEditor = (0, _mobxReact.observer)(function (_ref10) {
+  var slot = _ref10.slot;
 
-  var _useState9 = (0, _react.useState)(slot.value),
-      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      val = _useState10[0],
-      setVal = _useState10[1];
+  var _useState7 = (0, _react.useState)(slot.value),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      val = _useState8[0],
+      setVal = _useState8[1];
 
   (0, _react.useEffect)(function () {
     var num = parseInt(val, 10);
@@ -305,7 +269,7 @@ var IntegerEditor = (0, _mobxReact.observer)(function (_ref11) {
       slot.set(num);
     }
   }, [slot, val]);
-  return /*#__PURE__*/_react.default.createElement(_core.TextField, {
+  return /*#__PURE__*/_react.default.createElement(MyTextField, {
     label: slot.name,
     helperText: slot.description,
     value: val,
@@ -315,8 +279,8 @@ var IntegerEditor = (0, _mobxReact.observer)(function (_ref11) {
     }
   });
 });
-var booleanEditor = (0, _mobxReact.observer)(function (_ref12) {
-  var slot = _ref12.slot;
+var BooleanEditor = (0, _mobxReact.observer)(function (_ref11) {
+  var slot = _ref11.slot;
   return /*#__PURE__*/_react.default.createElement(_core.FormControl, null, /*#__PURE__*/_react.default.createElement(_core.FormControlLabel, {
     label: slot.name,
     control: /*#__PURE__*/_react.default.createElement(_core.Checkbox, {
@@ -327,20 +291,18 @@ var booleanEditor = (0, _mobxReact.observer)(function (_ref12) {
     })
   }), /*#__PURE__*/_react.default.createElement(_core.FormHelperText, null, slot.description));
 });
-var stringEnumEditor = (0, _mobxReact.observer)(function (_ref13) {
-  var slot = _ref13.slot,
-      slotSchema = _ref13.slotSchema;
+var StringEnumEditor = (0, _mobxReact.observer)(function (_ref12) {
+  var slot = _ref12.slot,
+      slotSchema = _ref12.slotSchema;
   var p = (0, _mobxStateTree.getPropertyMembers)((0, _mstReflection.getSubType)(slotSchema));
   var choices = (0, _mstReflection.getUnionSubTypes)((0, _mstReflection.getUnionSubTypes)((0, _mstReflection.getSubType)((0, _mstReflection.getPropertyType)(p, 'value')))[1]).map(function (t) {
     return t.value;
   });
-  return /*#__PURE__*/_react.default.createElement(_core.TextField, {
+  return /*#__PURE__*/_react.default.createElement(MyTextField, {
     value: slot.value,
     label: slot.name,
-    select: true // error={filterError}
-    ,
+    select: true,
     helperText: slot.description,
-    fullWidth: true,
     onChange: function onChange(evt) {
       return slot.set(evt.target.value);
     }
@@ -351,10 +313,10 @@ var stringEnumEditor = (0, _mobxReact.observer)(function (_ref13) {
     }, str);
   }));
 });
-var FileSelectorWrapper = (0, _mobxReact.observer)(function (_ref14) {
+var FileSelectorWrapper = (0, _mobxReact.observer)(function (_ref13) {
   var _getEnv$pluginManager;
 
-  var slot = _ref14.slot;
+  var slot = _ref13.slot;
   return /*#__PURE__*/_react.default.createElement(_ui.FileSelector, {
     location: slot.value,
     setLocation: function setLocation(location) {
@@ -369,14 +331,14 @@ var valueComponents = {
   string: StringEditor,
   text: TextEditor,
   fileLocation: FileSelectorWrapper,
-  stringArray: StringArrayEditor,
+  stringArray: _StringArrayEditor.default,
   stringArrayMap: StringArrayMapEditor,
   numberMap: NumberMapEditor,
   number: NumberEditor,
   integer: IntegerEditor,
   color: _ColorEditor.default,
-  stringEnum: stringEnumEditor,
-  boolean: booleanEditor,
+  stringEnum: StringEnumEditor,
+  boolean: BooleanEditor,
   frozen: _JsonEditor.default,
   configRelationships: _JsonEditor.default
 };
@@ -400,9 +362,9 @@ var useSlotEditorStyles = (0, _core.makeStyles)(function (theme) {
   };
 });
 exports.useSlotEditorStyles = useSlotEditorStyles;
-var SlotEditor = (0, _mobxReact.observer)(function (_ref15) {
-  var slot = _ref15.slot,
-      slotSchema = _ref15.slotSchema;
+var SlotEditor = (0, _mobxReact.observer)(function (_ref14) {
+  var slot = _ref14.slot,
+      slotSchema = _ref14.slotSchema;
   var classes = useSlotEditorStyles();
   var type = slot.type;
   var ValueComponent = slot.isCallback ? _CallbackEditor.default : valueComponents[type];

package/dist/ConfigurationEditorWidget/components/StringArrayEditor.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare const StringArrayEditor: ({ slot, }: {
+    slot: {
+        name: string;
+        value: string[];
+        setAtIndex: Function;
+        removeAtIndex: Function;
+        add: Function;
+        description: string;
+    };
+}) => JSX.Element;
+export default StringArrayEditor;

package/dist/ConfigurationEditorWidget/components/StringArrayEditor.js

@@ -0,0 +1,110 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobxReact = require("mobx-react");
+
+var _core = require("@material-ui/core");
+
+var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// icons
+var StringArrayEditor = (0, _mobxReact.observer)(function (_ref) {
+  var slot = _ref.slot;
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      addNew = _useState4[0],
+      setAddNew = _useState4[1];
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, slot.name ? /*#__PURE__*/_react.default.createElement(_core.InputLabel, null, slot.name) : null, /*#__PURE__*/_react.default.createElement(_core.List, {
+    disablePadding: true
+  }, slot.value.map(function (val, idx) {
+    return /*#__PURE__*/_react.default.createElement(_core.ListItem, {
+      key: idx,
+      disableGutters: true
+    }, /*#__PURE__*/_react.default.createElement(_core.TextField, {
+      value: val,
+      onChange: function onChange(evt) {
+        return slot.setAtIndex(idx, evt.target.value);
+      },
+      InputProps: {
+        endAdornment: /*#__PURE__*/_react.default.createElement(_core.InputAdornment, {
+          position: "end"
+        }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+          color: "secondary",
+          onClick: function onClick() {
+            return slot.removeAtIndex(idx);
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Delete.default, null)))
+      }
+    }));
+  }), addNew ? /*#__PURE__*/_react.default.createElement(_core.ListItem, {
+    disableGutters: true
+  }, /*#__PURE__*/_react.default.createElement(_core.TextField, {
+    value: value,
+    placeholder: "add new",
+    onChange: function onChange(event) {
+      return setValue(event.target.value);
+    },
+    InputProps: {
+      endAdornment: /*#__PURE__*/_react.default.createElement(_core.InputAdornment, {
+        position: "end"
+      }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.Button, {
+        color: "primary",
+        variant: "contained",
+        style: {
+          margin: 2
+        },
+        "data-testid": "stringArrayAdd-".concat(slot.name),
+        onClick: function onClick() {
+          setAddNew(false);
+          slot.add(value);
+          setValue('');
+        }
+      }, "OK"), /*#__PURE__*/_react.default.createElement(_core.Button, {
+        color: "primary",
+        variant: "contained",
+        style: {
+          margin: 2
+        },
+        onClick: function onClick() {
+          setAddNew(false);
+          setValue('');
+        }
+      }, "Cancel")))
+    }
+  })) : null, /*#__PURE__*/_react.default.createElement(_core.Button, {
+    color: "primary",
+    variant: "contained",
+    style: {
+      margin: 4
+    },
+    disabled: addNew,
+    onClick: function onClick() {
+      return setAddNew(true);
+    }
+  }, "Add item")), /*#__PURE__*/_react.default.createElement(_core.FormHelperText, null, slot.description));
+});
+var _default = StringArrayEditor;
+exports.default = _default;

package/dist/ConfigurationEditorWidget/index.js

@@ -26,7 +26,7 @@ exports.configSchema = configSchema;
 var HeadingComponent = (0, _mobxReact.observer)(function (_ref) {
   var model = _ref.model;
 
-  if (model && model.target) {
+  if (model !== null && model !== void 0 && model.target) {
     if (model.target.type) {
       return "".concat(model.target.type, " settings");
     }
@@ -34,7 +34,7 @@ var HeadingComponent = (0, _mobxReact.observer)(function (_ref) {
     if ((0, _mobxStateTree.isStateTreeNode)(model.target)) {
       var type = (0, _mobxStateTree.getType)(model.target);
 
-      if (type && type.name) {
+      if (type !== null && type !== void 0 && type.name) {
         return "".concat(type.name.replace('ConfigurationSchema', ''), " settings");
       }
     }

package/dist/RefNameAliasAdapter/RefNameAliasAdapter.js

@@ -79,7 +79,9 @@ var RefNameAliasAdapter = /*#__PURE__*/function (_BaseAdapter) {
 
                   return {
                     refName: refName,
-                    aliases: aliases
+                    aliases: aliases.filter(function (f) {
+                      return !!f.trim();
+                    })
                   };
                 }));
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-config",
-  "version": "1.7.8",
+  "version": "1.7.11",
   "description": "JBrowse 2 config utilities",
   "keywords": [
     "jbrowse",
@@ -53,5 +53,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b429fa2bb5734fc8a5380988f6dfdd3f7a41a39f"
+  "gitHead": "5c21beb48a21f08b0091d293f09ac99174c48f77"
 }

package/src/ConfigurationEditorWidget/components/CodeEditor.js

@@ -12,20 +12,21 @@ const fontSize = '12px'
 const fontFamily =
   'Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace'
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
   callbackEditor: {
     fontFamily,
     fontSize,
+    background: theme.palette.background.default,
     overflowX: 'auto',
     marginTop: '16px',
-    borderBottom: '1px solid rgba(0,0,0,0.42)',
+    border: '1px solid rgba(0,0,0,0.42)',
   },
   syntaxHighlighter: {
     margin: 0,
     fontFamily,
     fontSize,
   },
-})
+}))
 
 // eslint-disable-next-line react/prop-types
 export default function CodeEditor({ contents, setContents }) {