@pie-element/select-text 9.6.2-beta.1 → 9.6.2-beta.2

package/configure/lib/design.js

@@ -33,9 +33,9 @@ var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 
-var _textSelect = require("@pie-lib/pie-toolbox/text-select");
+var _textSelect = require("@pie-lib/text-select");
 
-var _configUi = require("@pie-lib/pie-toolbox/config-ui");
+var _configUi = require("@pie-lib/config-ui");
 
 var _Chip = _interopRequireDefault(require("@material-ui/core/Chip"));
 
@@ -43,28 +43,12 @@ var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
 
 var _debug = _interopRequireDefault(require("debug"));
 
-var _editableHtml = require("@pie-lib/pie-toolbox/editable-html");
-
-var _mathRendering = require("@pie-lib/pie-toolbox/math-rendering");
+var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
 
 var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
 
 var _utils = require("./utils");
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _Switch = _interopRequireDefault(require("@material-ui/core/Switch"));
-
-var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -95,12 +79,7 @@ var Design = /*#__PURE__*/function (_React$Component) {
         u.tokens = [];
       });
     }, 200));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeText", function (text) {
-      _this.updateText(text);
-
-      _this.clearTokens();
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeTextEvent", function (event) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeText", function (event) {
       return _this.updateText(event.target.value);
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeTokens", function (tokens, mode) {
@@ -114,14 +93,6 @@ var Design = /*#__PURE__*/function (_React$Component) {
         u.maxSelections = Math.max(max, correctTokenCount);
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeTokenizedText", function (text) {
-      _this.apply(function (u) {
-        u.tokenizedText = text; // const correctTokenCount = tokens.filter((t) => t.correct).length;
-        // const max = isFinite(u.maxSelections) ? u.maxSelections : 0;
-        //
-        // u.maxSelections = Math.max(max, correctTokenCount);
-      });
-    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeMaxSelections", function (event, max) {
       _this.apply(function (u) {
         return u.maxSelections = max;
@@ -172,193 +143,9 @@ var Design = /*#__PURE__*/function (_React$Component) {
         rationale: rationale
       }));
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "createDOMAnnotation", function (elems, annotation) {
-      var classes = _this.props.classes;
-      var id = annotation.id;
-      (elems || []).forEach(function (elem) {
-        elem.dataset.id = id;
-        elem.className = (0, _classnames["default"])(classes.token); // elem.onclick = !disabled && this.handleClick;
-        // elem.onmouseover = this.handleHover;
-        // elem.onmouseout = this.handleCancelHover;
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "createNewAnnotation", function (selectedElems, selectionDetails) {
-      var annotation = _objectSpread({
-        id: [selectionDetails.start, selectionDetails.end, new Date().getTime()].join('-')
-      }, selectionDetails);
-
-      _this.createDOMAnnotation(selectedElems, annotation);
-
-      return annotation;
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "wrapSentencesInSpans", function (html) {
-      var onClickHandler = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-      var classes = _this.props.classes;
-      var container = document.createElement('div');
-      container.innerHTML = html;
-
-      var splitSentences = function splitSentences(text) {
-        // Match sentences ending with punctuation:
-        // "." or "!" or "?"
-        var pattern = /([^.!?]+[.!?]+[\s"]*)|([^.!?]+$)/g;
-        var matches = text.match(pattern);
-        return matches || [];
-      };
-
-      var processNode = function processNode(node) {
-        if (node.nodeType === Node.TEXT_NODE) {
-          var sentences = splitSentences(node.textContent);
-          var fragment = document.createDocumentFragment();
-
-          var _iterator = _createForOfIteratorHelper(sentences),
-              _step;
-
-          try {
-            var _loop = function _loop() {
-              var sentence = _step.value;
-
-              if (sentence.trim()) {
-                var span = document.createElement('span');
-                span.textContent = sentence;
-                span.className = (0, _classnames["default"])(classes.token);
-
-                if (onClickHandler) {
-                  span.addEventListener('click', function (e) {
-                    onClickHandler(e, sentence);
-                  });
-                }
-
-                fragment.appendChild(span);
-              } else {
-                fragment.appendChild(document.createTextNode(sentence));
-              }
-            };
-
-            for (_iterator.s(); !(_step = _iterator.n()).done;) {
-              _loop();
-            }
-          } catch (err) {
-            _iterator.e(err);
-          } finally {
-            _iterator.f();
-          }
-
-          node.replaceWith(fragment);
-        } else if (node.nodeType === Node.ELEMENT_NODE) {
-          Array.from(node.childNodes).forEach(processNode);
-        }
-      };
-
-      Array.from(container.childNodes).forEach(processNode);
-      return container;
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleSelection", function (event) {
-      var selection = window.getSelection(); // prevent unwanted selections
-
-      if (event.detail > 2) {
-        (0, _utils.clearSelection)();
-        return;
-      }
-
-      if (selection && selection.rangeCount > 0) {
-        _this.wrapSelectionInSpan(selection);
-
-        (0, _utils.clearSelection)();
-
-        if (_this.textRef) {
-          var content = _this.textRef.getHTML();
-
-          _this.changeTokenizedText(content); // this.setState({ tokenizedText: content });
-
-        }
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleTokenClick", function (event) {
-      var correctMode = _this.state.correctMode;
-
-      if (!correctMode) {
-        return;
-      }
-
-      event.target.classList.toggle('correct');
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "clearTokens", function () {
-      var model = _this.props.model;
-
-      if (_this.textRef) {
-        var container = document.createElement('div');
-        container.innerHTML = model.text; // Remove all children and add new content
-
-        _this.textRef.innerHTML = '';
-
-        _this.textRef.appendChild(container);
-      }
-
-      _this.changeTokenizedText(model.text);
-
-      _this.setState({
-        tokenizedText: model.text
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "selectWords", function () {
-      var text = _this.state.text;
-
-      _this.clearTokens();
-
-      var tokenized = _this.wrapWordsInSpans(text, function (e) {
-        return _this.handleTokenClick(e);
-      });
-
-      console.log('words:', tokenized);
-
-      _this.changeTokenizedText(tokenized);
-
-      _this.setState({
-        tokenizedText: tokenized
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "selectSentences", function () {
-      var text = _this.state.text;
-
-      _this.clearTokens();
-
-      var container = _this.wrapSentencesInSpans(text); // Remove all children and add new content
-
-
-      _this.textRef.innerHTML = '';
-
-      _this.textRef.appendChild(container);
-
-      var tokenized = container.innerHTML;
-      console.log('sentences:', tokenized);
-
-      _this.changeTokenizedText(tokenized); // this.setState({ tokenizedText: tokenized });
-
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "selectParagraphs", function () {
-      var text = _this.state.text;
-
-      _this.clearTokens();
-
-      var container = _this.wrapParagraphContentInSpan(text); // Remove all children and add new content
-
-
-      _this.textRef.innerHTML = '';
-
-      _this.textRef.appendChild(container);
-
-      var tokenized = container.innerHTML;
-      console.log('paragraphs:', tokenized);
-
-      _this.changeTokenizedText(tokenized); // this.setState({ tokenizedText: tokenized });
-
-    });
     var _model = _this.props.model;
     _this.state = {
-      correctMode: false,
-      selectMode: false,
-      text: _model && _model.text || '',
-      tokenizedText: _model && _model.token || ''
+      text: _model && _model.text || ''
     };
     return _this;
   }
@@ -369,160 +156,17 @@ var Design = /*#__PURE__*/function (_React$Component) {
       var model = nProps.model;
 
       if (model && model.text) {
-        var _this$setState;
-
-        this.setState((_this$setState = {
+        this.setState({
           text: model.text
-        }, (0, _defineProperty2["default"])(_this$setState, "text", model.text), (0, _defineProperty2["default"])(_this$setState, "tokenizedText", model.tokenizedText || model.text), _this$setState)); // model.tokens.forEach((annotation) => {
-        //   console.log('annotation', annotation);
-        //   const [domStart, domEnd] = getDOMNodes(annotation.start, annotation.end, this.textRef);
-        //   console.log('domStart, domEnd', domStart, domEnd);
-        //
-        //   if (domStart && domEnd) {
-        //     const range = document.createRange();
-        //
-        //     range.setStart(domStart.node, domStart.offset);
-        //     range.setEnd(domEnd.node, domEnd.offset);
-        //
-        //     const spans = wrapRange(range);
-        //
-        //     this.createDOMAnnotation(spans, annotation);
-        //   }
-        // });
+        });
       }
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      // console.log('UPDATED');
-      // console.log('this.state.text', this.state.text);
-      //eslint-disable-next-line
-      var domNode = _reactDom["default"].findDOMNode(this);
-
-      (0, _mathRendering.renderMath)(domNode);
-    }
-  }, {
-    key: "wrapWordsInSpans",
-    value: // addAnnotation = (type) => {
-    //   const { annotations, onChange } = this.props;
-    //   const annotation = this.createNewAnnotation('', type);
-    //   const labelElem = getLabelElement(annotation.id);
-    //
-    //   annotations.push(annotation);
-    //
-    //   this.setState({
-    //     openedMenu: false,
-    //     openedEditor: true,
-    //     annotationIndex: annotations.length - 1,
-    //     annotation,
-    //     labelElem,
-    //   });
-    //
-    //   onChange(annotations);
-    // };
-    // new functionalities
-    function wrapWordsInSpans(html, onClick) {
-      var classes = this.props.classes;
-      var container = document.createElement('div');
-      container.innerHTML = html;
-
-      var processNode = function processNode(node) {
-        if (node.nodeType === Node.TEXT_NODE) {
-          var words = node.textContent.split(/(\s+|\b)/); // split by word boundaries + spaces
-
-          var fragment = document.createDocumentFragment();
-
-          var _iterator2 = _createForOfIteratorHelper(words),
-              _step2;
-
-          try {
-            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-              var word = _step2.value;
-
-              if (word.trim()) {
-                var span = document.createElement('span');
-                span.className = (0, _classnames["default"])(classes.token);
-                span.addEventListener('click', function (e) {
-                  return onClick(e);
-                });
-                span.textContent = word;
-                fragment.appendChild(span);
-              } else {
-                fragment.appendChild(document.createTextNode(word));
-              }
-            }
-          } catch (err) {
-            _iterator2.e(err);
-          } finally {
-            _iterator2.f();
-          }
-
-          node.replaceWith(fragment);
-        } else if (node.nodeType === Node.ELEMENT_NODE) {
-          Array.from(node.childNodes).forEach(processNode);
-        }
-      };
-
-      Array.from(container.childNodes).forEach(processNode);
-      return container.innerHTML;
-    }
-  }, {
-    key: "wrapParagraphContentInSpan",
-    value: function wrapParagraphContentInSpan(html) {
-      var _this2 = this;
-
-      var classes = this.props.classes;
-      var container = document.createElement('div');
-      container.innerHTML = html;
-      container.querySelectorAll('p').forEach(function (p) {
-        var span = document.createElement('span');
-        span.className = (0, _classnames["default"])(classes.token);
-        span.addEventListener('click', _this2.handleTokenClick); // Move all children of <p> into the span
-
-        while (p.firstChild) {
-          span.appendChild(p.firstChild);
-        }
-
-        p.appendChild(span);
-      });
-      return container;
-    }
-  }, {
-    key: "wrapSelectionInSpan",
-    value: function wrapSelectionInSpan(selection) {
-      var classes = this.props.classes;
-      var range = selection.getRangeAt(0);
-
-      if (range.collapsed) {
-        console.log('Selection is collapsed (no text selected).');
-        return;
-      } // Extract the contents of the selection
-
-
-      var contents = range.extractContents(); // Create the span wrapper
-
-      var span = document.createElement('span');
-      span.className = (0, _classnames["default"])(classes.token);
-      span.addEventListener('click', this.handleTokenClick);
-      span.appendChild(contents); // Insert back into the DOM
-
-      range.insertNode(span); // Collapse the selection
-
-      selection.removeAllRanges();
-    }
   }, {
     key: "render",
     value: function render() {
-      var _configuration$teache,
-          _configuration$prompt,
-          _this3 = this,
-          _configuration$ration;
-
-      var _this$state = this.state,
-          textValue = _this$state.text,
-          correctMode = _this$state.correctMode,
-          selectMode = _this$state.selectMode,
-          tokenizedText = _this$state.tokenizedText;
+      var _configuration$teache, _configuration$prompt, _configuration$ration;
+
+      var textValue = this.state.text;
       var _this$props6 = this.props,
           classes = _this$props6.classes,
           configuration = _this$props6.configuration,
@@ -648,7 +292,7 @@ var Design = /*#__PURE__*/function (_React$Component) {
       }, teacherInstructionsEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
         label: teacherInstructions.label,
         className: classes.promptHolder
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
+      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
         className: classes.prompt,
         markup: model.teacherInstructions || '',
         onChange: this.onTeacherInstructionsChanged,
@@ -672,7 +316,7 @@ var Design = /*#__PURE__*/function (_React$Component) {
       }, teacherInstructionsError)), promptEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
         label: prompt.label || '',
         className: classes.promptHolder
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
+      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
         className: classes.prompt,
         markup: model.prompt,
         onChange: this.onPromptChanged,
@@ -692,64 +336,69 @@ var Design = /*#__PURE__*/function (_React$Component) {
         mathMlOptions: mathMlOptions
       }), promptError && /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.errorText
-      }, promptError)), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.subheader
-      }, "NEW functionality", /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
-        control: /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
-          checked: selectMode,
-          onChange: function onChange() {
-            _this3.setState({
-              selectMode: !selectMode
-            }); // renderMath(this);
-
-          }
-        }),
-        label: "Select tokens"
-      })), selectMode && /*#__PURE__*/_react["default"].createElement(_textSelect.Controls, {
-        onClear: this.clearTokens,
-        onWords: this.selectWords,
-        onSentences: this.selectSentences,
-        onParagraphs: this.selectParagraphs,
-        setCorrectMode: correctMode,
-        onToggleCorrectMode: function onToggleCorrectMode() {
-          return _this3.setState({
-            correctMode: !correctMode
-          });
-        }
-      }), text.settings && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
+      }, promptError)), text.settings && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
         label: text.label || '',
         className: classes.promptHolder
-      }, selectMode ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.textContainer,
-        ref: function ref(r) {
-          return _this3.textRef = r;
+      }, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+        className: classes.input,
+        multiline: true,
+        defaultValue: textValue,
+        onChange: this.changeText,
+        spellCheck: spellCheckEnabled
+      })), tokens.settings && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
+        label: tokens.label || '',
+        className: classes.tokenizerContainer
+      }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+        classes: {
+          tooltip: classes.tooltip
         },
-        onMouseDown: selectMode && !correctMode ? _utils.clearSelection : function () {},
-        onMouseUp: selectMode && !correctMode ? this.handleSelection : function () {},
-        dangerouslySetInnerHTML: {
-          __html: tokenizedText
+        disableFocusListener: true,
+        disableTouchListener: true,
+        placement: 'right',
+        title: validationMessage
+      }, /*#__PURE__*/_react["default"].createElement(_Info["default"], {
+        fontSize: 'small',
+        color: 'primary',
+        style: {
+          position: 'absolute',
+          left: '48px',
+          top: '-3px'
         }
-      }) : /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
-        className: classes.prompt,
-        markup: textValue,
-        onChange: this.changeText,
-        nonEmpty: false,
-        disableUnderline: true,
-        toolbarOpts: toolbarOpts,
-        pluginProps: getPluginProps(text === null || text === void 0 ? void 0 : text.inputConfiguration),
-        spellCheck: spellCheckEnabled,
-        imageSupport: imageSupport,
-        uploadSoundSupport: uploadSoundSupport,
-        languageCharactersProps: [{
-          language: 'spanish'
-        }, {
-          language: 'special'
-        }],
-        mathMlOptions: mathMlOptions
+      })), /*#__PURE__*/_react["default"].createElement(_textSelect.Tokenizer, {
+        className: classes.tokenizer,
+        text: model.text,
+        tokens: tokensModel,
+        onChange: this.changeTokens
+      })), tokensError && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, tokensError), selectionsError && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, selectionsError), /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.tokensDetails
+      }, mode.settings && /*#__PURE__*/_react["default"].createElement(_Chip["default"], {
+        label: "".concat(mode.label, ": ").concat(model.mode ? model.mode : 'None'),
+        className: classes.chip
+      }), selections.settings && /*#__PURE__*/_react["default"].createElement(_Chip["default"], {
+        label: "".concat(selections.label, ": ").concat(tokensModel.length),
+        className: classes.chip
+      }), correctAnswer.settings && /*#__PURE__*/_react["default"].createElement(_Chip["default"], {
+        label: "".concat(correctAnswer.label, ": ").concat(tokensModel.filter(function (t) {
+          return t.correct;
+        }).length),
+        className: classes.chip
+      }), selectionCount.settings && /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextField, {
+        min: tokensModel.filter(function (t) {
+          return t.correct;
+        }).length || 0,
+        label: "".concat(selectionCount.label, " (0:any)"),
+        max: tokensModel.length,
+        value: model.maxSelections,
+        onChange: this.changeMaxSelections,
+        className: classes.numberField
       })), rationaleEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
         label: rationale.label || '',
         className: classes.promptHolder
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
+      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
         className: classes.prompt,
         markup: model.rationale || '',
         onChange: this.onRationaleChanged,
@@ -850,43 +499,6 @@ var _default = (0, _styles.withStyles)(function (theme) {
       fontSize: theme.typography.fontSize - 2,
       color: theme.palette.error.main,
       paddingTop: theme.spacing.unit
-    },
-    subheader: {
-      paddingBottom: '8px',
-      borderBottom: '1px solid grey',
-      marginBottom: '16px',
-      marginTop: '24px',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between'
-    },
-    textContainer: {
-      padding: '15px 21px',
-      border: '1px solid #ccc',
-      borderRadius: '4px',
-      overflowY: 'scroll',
-      whiteSpace: 'pre-wrap',
-      overflowWrap: 'break-word',
-      '& p': {
-        margin: 0
-      },
-      '& span[data-latex]': {
-        userSelect: 'none',
-        '-webkit-user-select': 'none',
-        '-moz-user-select': 'none',
-        '-ms-user-select': 'none'
-      }
-    },
-    token: {
-      position: 'relative',
-      cursor: 'pointer',
-      backgroundColor: '#fff9c4',
-      '&:hover': {
-        backgroundColor: '#E5E0B0'
-      },
-      '&.correct': {
-        backgroundColor: '#4caf50'
-      }
     }
   };
 })(Design);