@pie-lib/text-select 1.29.0 → 1.29.3

package/esm/index.js

@@ -0,0 +1,1764 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from '@material-ui/core/Button';
+import { withStyles } from '@material-ui/core/styles';
+import Switch from '@material-ui/core/Switch';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import { color } from '@pie-lib/render-ui';
+import classNames from 'classnames';
+import compact from 'lodash/compact';
+import English from '@pie-framework/parse-english';
+import clone from 'lodash/clone';
+import isEqual from 'lodash/isEqual';
+import differenceWith from 'lodash/differenceWith';
+import { noSelect } from '@pie-lib/style-utils';
+import yellow from '@material-ui/core/colors/yellow';
+import green from '@material-ui/core/colors/green';
+import debug from 'debug';
+import require$$3 from '@material-ui/core/SvgIcon';
+import { renderToString } from 'react-dom/server';
+import Translator from '@pie-lib/translator';
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+class Controls extends React.Component {
+  render() {
+    const {
+      classes,
+      onClear,
+      onWords,
+      onSentences,
+      onParagraphs,
+      setCorrectMode,
+      onToggleCorrectMode
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes.controls
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+      onClick: onWords,
+      className: classes.button,
+      size: "small",
+      color: "primary",
+      disabled: setCorrectMode
+    }, "Words"), /*#__PURE__*/React.createElement(Button, {
+      onClick: onSentences,
+      className: classes.button,
+      size: "small",
+      color: "primary",
+      disabled: setCorrectMode
+    }, "Sentences"), /*#__PURE__*/React.createElement(Button, {
+      onClick: onParagraphs,
+      className: classes.button,
+      size: "small",
+      color: "primary",
+      disabled: setCorrectMode
+    }, "Paragraphs"), /*#__PURE__*/React.createElement(Button, {
+      className: classes.button,
+      size: "small",
+      color: "secondary",
+      onClick: onClear,
+      disabled: setCorrectMode
+    }, "Clear")), /*#__PURE__*/React.createElement(FormControlLabel, {
+      control: /*#__PURE__*/React.createElement(Switch, {
+        classes: {
+          checked: classes.checkedThumb,
+          bar: classNames({
+            [classes.checkedBar]: setCorrectMode
+          })
+        },
+        checked: setCorrectMode,
+        onChange: onToggleCorrectMode
+      }),
+      label: "Set correct answers"
+    }));
+  }
+
+}
+Controls.propTypes = {
+  classes: PropTypes.object.isRequired,
+  onClear: PropTypes.func.isRequired,
+  onWords: PropTypes.func.isRequired,
+  onSentences: PropTypes.func.isRequired,
+  onParagraphs: PropTypes.func.isRequired,
+  setCorrectMode: PropTypes.bool.isRequired,
+  onToggleCorrectMode: PropTypes.func.isRequired
+};
+Controls.defaultProps = {};
+var Controls$1 = withStyles(theme => ({
+  button: {
+    marginRight: theme.spacing.unit
+  },
+  controls: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  checkedThumb: {
+    color: `${color.tertiary()} !important`
+  },
+  checkedBar: {
+    backgroundColor: `${color.tertiaryLight()} !important`
+  }
+}))(Controls);
+
+const g = (str, node) => {
+  if (node.children) {
+    return node.children.reduce(g, str);
+  } else if (node.value) {
+    return str + node.value;
+  } else {
+    return str;
+  }
+};
+
+const getParagraph = p => g('', p);
+
+const getSentence = s => g('', s);
+
+const getWord = w => g('', w);
+
+const paragraphs = text => {
+  const tree = new English().parse(text);
+  const out = tree.children.reduce((acc, child) => {
+    if (child.type === 'ParagraphNode') {
+      const paragraph = {
+        text: getParagraph(child),
+        start: child.position.start.offset,
+        end: child.position.end.offset
+      };
+      return acc.concat([paragraph]);
+    } else {
+      return acc;
+    }
+  }, []);
+  return out;
+};
+const handleSentence = (child, acc) => {
+  const sentenceChilds = []; // we parse the children of the sentence
+
+  let newAcc = child.children.reduce(function (acc, child) {
+    // if we find a whitespace node that's \n, we end the sentence
+    if (child.type === 'WhiteSpaceNode' && child.value === '\n') {
+      if (sentenceChilds.length) {
+        const firstWord = sentenceChilds[0]; // we create a sentence starting from the first word until the new line
+
+        const sentence = {
+          text: sentenceChilds.map(d => getSentence(d)).join(''),
+          start: firstWord.position.start.offset,
+          end: child.position.start.offset
+        }; // we remove all the elements from the array
+
+        sentenceChilds.splice(0, sentenceChilds.length);
+        return acc.concat([sentence]);
+      }
+    } else {
+      // otherwise we add it to the array that contains the child forming a sentence
+      sentenceChilds.push(child);
+    }
+
+    return acc;
+  }, acc); // we treat the case when no \n character is found at the end
+  // so we create a sentence from the last words or white spaces found
+
+  if (sentenceChilds.length) {
+    const firstWord = sentenceChilds[0];
+    const lastWord = sentenceChilds[sentenceChilds.length - 1];
+    const sentence = {
+      text: sentenceChilds.map(d => getSentence(d)).join(''),
+      start: firstWord.position.start.offset,
+      end: lastWord.position.end.offset
+    };
+    newAcc = newAcc.concat([sentence]);
+    sentenceChilds.splice(0, sentenceChilds.length);
+  }
+
+  return newAcc;
+};
+const sentences = text => {
+  const tree = new English().parse(text);
+  const out = tree.children.reduce((acc, child) => {
+    if (child.type === 'ParagraphNode') {
+      return child.children.reduce((acc, child) => {
+        if (child.type === 'SentenceNode') {
+          const newAcc = handleSentence(child, acc);
+          return newAcc || acc;
+        } else {
+          return acc;
+        }
+      }, acc);
+    } else {
+      return acc;
+    }
+  }, []);
+  return out;
+};
+const words = text => {
+  const tree = new English().parse(text);
+  const out = tree.children.reduce((acc, child) => {
+    if (child.type === 'ParagraphNode') {
+      return child.children.reduce((acc, child) => {
+        if (child.type === 'SentenceNode') {
+          return child.children.reduce((acc, child) => {
+            if (child.type === 'WordNode') {
+              const node = {
+                text: getWord(child),
+                start: child.position.start.offset,
+                end: child.position.end.offset
+              };
+              return acc.concat([node]);
+            } else {
+              return acc;
+            }
+          }, acc);
+        } else {
+          return acc;
+        }
+      }, acc);
+    } else {
+      return acc;
+    }
+  }, []);
+  return out;
+};
+
+class Intersection {
+  constructor(results) {
+    this.results = results;
+  }
+
+  get hasOverlap() {
+    return this.results.filter(r => r.type === 'overlap').length > 0;
+  }
+
+  get surroundedTokens() {
+    return this.results.filter(r => r.type === 'within-selection').map(t => t.token);
+  }
+
+}
+/**
+ * get intersection info for the selection in relation to tokens.
+ * @param {{start: number, end: number}} selection
+ * @param {{start: number, end: number}[]} tokens
+ * @return {tokens: [], type: 'overlap|no-overlap|contains'}
+ */
+
+
+const intersection = (selection, tokens) => {
+  const {
+    start,
+    end
+  } = selection;
+
+  const startsWithin = t => start >= t.start && start < t.end;
+
+  const endsWithin = t => end > t.start && end <= t.end;
+
+  const mapped = tokens.map(t => {
+    if (start === t.start && end === t.end) {
+      return {
+        token: t,
+        type: 'exact-fit'
+      };
+    } else if (start <= t.start && end >= t.end) {
+      return {
+        token: t,
+        type: 'within-selection'
+      };
+    } else if (startsWithin(t) || endsWithin(t)) {
+      return {
+        token: t,
+        type: 'overlap'
+      };
+    }
+  });
+  return new Intersection(compact(mapped));
+};
+const sort = tokens => {
+  if (!Array.isArray(tokens)) {
+    return tokens;
+  } else {
+    const out = clone(tokens);
+    out.sort((a, b) => {
+      const s = a.start < b.start ? -1 : a.start > b.start ? 1 : 0;
+      const e = a.end < b.end ? -1 : a.end > b.end ? 1 : 0;
+
+      if (s === -1 && e !== -1) {
+        throw new Error(`sort does not support intersecting tokens. a: ${a.start}-${a.end}, b: ${b.start}-${b.end}`);
+      }
+
+      return s;
+    });
+    return out;
+  }
+};
+const normalize = (textToNormalize, tokens) => {
+  // making sure text provided is a string
+  const text = textToNormalize || '';
+
+  if (!Array.isArray(tokens) || tokens.length === 0) {
+    return [{
+      text,
+      start: 0,
+      end: text.length
+    }];
+  }
+
+  const out = sort(tokens).reduce((acc, t, index, outer) => {
+    let tokens = [];
+    const lastIndex = acc.lastIndex;
+
+    if (t.start === lastIndex) {
+      tokens = [{
+        text: text.substring(lastIndex, t.end),
+        start: lastIndex,
+        end: t.end,
+        predefined: true,
+        correct: t.correct,
+        isMissing: t.isMissing
+      }];
+    } else if (lastIndex < t.start) {
+      tokens = [{
+        text: text.substring(lastIndex, t.start),
+        start: lastIndex,
+        end: t.start
+      }, {
+        text: text.substring(t.start, t.end),
+        start: t.start,
+        end: t.end,
+        predefined: true,
+        correct: t.correct,
+        isMissing: t.isMissing
+      }];
+    }
+
+    if (index === outer.length - 1 && t.end < text.length) {
+      const last = {
+        text: text.substring(t.end),
+        start: t.end,
+        end: text.length
+      };
+      tokens.push(last);
+    }
+
+    return {
+      lastIndex: tokens.length ? tokens[tokens.length - 1].end : lastIndex,
+      result: acc.result.concat(tokens)
+    };
+  }, {
+    result: [],
+    lastIndex: 0
+  });
+  return out.result;
+};
+
+const clearSelection = () => {
+  if (document.getSelection) {
+    // for all new browsers (IE9+, Chrome, Firefox)
+    document.getSelection().removeAllRanges();
+    document.getSelection().addRange(document.createRange());
+  } else if (window.getSelection) {
+    // equals with the document.getSelection (MSDN info)
+    if (window.getSelection().removeAllRanges) {
+      // for all new browsers (IE9+, Chrome, Firefox)
+      window.getSelection().removeAllRanges();
+      window.getSelection().addRange(document.createRange());
+    } else if (window.getSelection().empty) {
+      // Chrome supports this as well
+      window.getSelection().empty();
+    }
+  } else if (document.selection) {
+    // IE8-
+    document.selection.empty();
+  }
+};
+const getCaretCharacterOffsetWithin = element => {
+  var caretOffset = 0;
+  var doc = element.ownerDocument || element.document;
+  var win = doc.defaultView || doc.parentWindow;
+  var sel;
+
+  if (typeof win.getSelection !== 'undefined') {
+    sel = win.getSelection();
+
+    if (sel.rangeCount > 0) {
+      var range = win.getSelection().getRangeAt(0);
+      var selected = range.toString().length;
+      var preCaretRange = range.cloneRange();
+      preCaretRange.selectNodeContents(element);
+      preCaretRange.setEnd(range.endContainer, range.endOffset);
+
+      if (selected) {
+        caretOffset = preCaretRange.toString().length - selected;
+      } else {
+        caretOffset = preCaretRange.toString().length;
+      }
+    }
+  } else if ((sel = doc.selection) && sel.type !== 'Control') {
+    var textRange = sel.createRange();
+    var preCaretTextRange = doc.body.createTextRange();
+    preCaretTextRange.moveToElementText(element);
+    preCaretTextRange.setEndPoint('EndToEnd', textRange);
+    caretOffset = preCaretTextRange.text.length;
+  }
+
+  return caretOffset;
+};
+
+const log$2 = debug('@pie-lib:text-select:token-text');
+const Text = withStyles(() => ({
+  predefined: {
+    cursor: 'pointer',
+    backgroundColor: yellow[100],
+    border: `dashed 0px ${yellow[700]}`,
+    // we need this for nested tokenized elements like paragraphs, where p is inside span
+    '& *': {
+      cursor: 'pointer',
+      backgroundColor: yellow[100],
+      border: `dashed 0px ${yellow[700]}`
+    }
+  },
+  correct: {
+    backgroundColor: green[500],
+    '& *': {
+      backgroundColor: green[500]
+    }
+  }
+}))(({
+  text,
+  predefined,
+  classes,
+  onClick,
+  correct
+}) => {
+  const formattedText = (text || '').replace(/\n/g, '<br>');
+
+  if (predefined) {
+    const className = classNames(classes.predefined, correct && classes.correct);
+    return /*#__PURE__*/React.createElement("span", {
+      onClick: onClick,
+      className: className,
+      dangerouslySetInnerHTML: {
+        __html: formattedText
+      }
+    });
+  } else {
+    return /*#__PURE__*/React.createElement("span", {
+      dangerouslySetInnerHTML: {
+        __html: formattedText
+      }
+    });
+  }
+});
+const notAllowedCharacters = ['\n', ' ', '\t'];
+class TokenText extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.onClick = event => {
+      const {
+        onSelectToken,
+        text,
+        tokens
+      } = this.props;
+      event.preventDefault();
+
+      if (typeof window === 'undefined') {
+        return;
+      }
+
+      const selection = window.getSelection();
+      const textSelected = selection.toString();
+
+      if (textSelected.length > 0 && notAllowedCharacters.indexOf(textSelected) < 0) {
+        if (this.root) {
+          let offset = getCaretCharacterOffsetWithin(this.root);
+          /*
+           Since we implemented new line functionality (\n) using <br /> dom elements
+           and window.getSelection is not taking that into consideration, the offset might
+           be off by a few characters.
+            To combat that, we check if the selected text is right at the beginning of the offset.
+            If it's not, we add the additional offset in order for that to be accurate
+           */
+
+          const newLineOffset = text.slice(offset).indexOf(textSelected);
+          offset += newLineOffset;
+
+          if (offset !== undefined) {
+            const endIndex = offset + textSelected.length;
+
+            if (endIndex <= text.length) {
+              const i = intersection({
+                start: offset,
+                end: endIndex
+              }, tokens);
+
+              if (i.hasOverlap) {
+                log$2('hasOverlap  - do nothing');
+                clearSelection();
+              } else {
+                const tokensToRemove = i.surroundedTokens;
+                const token = {
+                  text: textSelected,
+                  start: offset,
+                  end: endIndex
+                };
+                onSelectToken(token, tokensToRemove);
+                clearSelection();
+              }
+            }
+          }
+        }
+      }
+    };
+  }
+
+  render() {
+    const {
+      text,
+      tokens,
+      className,
+      onTokenClick
+    } = this.props;
+    const normalized = normalize(text, tokens);
+    return /*#__PURE__*/React.createElement("div", {
+      className: className,
+      ref: r => this.root = r,
+      onClick: this.onClick
+    }, normalized.map((t, index) => {
+      return /*#__PURE__*/React.createElement(Text, _extends({
+        key: index
+      }, t, {
+        onClick: () => onTokenClick(t)
+      }));
+    }));
+  }
+
+}
+TokenText.propTypes = {
+  text: PropTypes.string.isRequired,
+  tokens: PropTypes.array.isRequired,
+  onTokenClick: PropTypes.func.isRequired,
+  onSelectToken: PropTypes.func.isRequired,
+  className: PropTypes.string
+};
+
+class Tokenizer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.onChangeHandler = (token, mode) => {
+      this.props.onChange(token, mode);
+      this.setState({
+        mode
+      });
+    };
+
+    this.toggleCorrectMode = () => this.setState({
+      setCorrectMode: !this.state.setCorrectMode
+    });
+
+    this.clear = () => {
+      this.onChangeHandler([], '');
+    };
+
+    this.buildTokens = (type, fn) => {
+      const {
+        text
+      } = this.props;
+      const tokens = fn(text);
+      this.onChangeHandler(tokens, type);
+    };
+
+    this.selectToken = (newToken, tokensToRemove) => {
+      const {
+        tokens
+      } = this.props;
+      const update = differenceWith(clone(tokens), tokensToRemove, isEqual);
+      update.push(newToken);
+      this.onChangeHandler(update, this.state.mode);
+    };
+
+    this.tokenClick = token => {
+      const {
+        setCorrectMode
+      } = this.state;
+
+      if (setCorrectMode) {
+        this.setCorrect(token);
+      } else {
+        this.removeToken(token);
+      }
+    };
+
+    this.tokenIndex = token => {
+      const {
+        tokens
+      } = this.props;
+      return tokens.findIndex(t => {
+        return t.text == token.text && t.start == token.start && t.end == token.end;
+      });
+    };
+
+    this.setCorrect = token => {
+      const {
+        tokens
+      } = this.props;
+      const index = this.tokenIndex(token);
+
+      if (index !== -1) {
+        const t = tokens[index];
+        t.correct = !t.correct;
+        const update = clone(tokens);
+        update.splice(index, 1, t);
+        this.onChangeHandler(update, this.state.mode);
+      }
+    };
+
+    this.removeToken = token => {
+      const {
+        tokens
+      } = this.props;
+      const index = this.tokenIndex(token);
+
+      if (index !== -1) {
+        const update = clone(tokens);
+        update.splice(index, 1);
+        this.onChangeHandler(update, this.state.mode);
+      }
+    };
+
+    this.state = {
+      setCorrectMode: false,
+      mode: ''
+    };
+  }
+
+  render() {
+    const {
+      text,
+      tokens,
+      classes,
+      className
+    } = this.props;
+    const {
+      setCorrectMode
+    } = this.state;
+    const tokenClassName = classNames(classes.text, setCorrectMode && classes.noselect);
+    const rootName = classNames(classes.tokenizer, className);
+    return /*#__PURE__*/React.createElement("div", {
+      className: rootName
+    }, /*#__PURE__*/React.createElement(Controls$1, {
+      onClear: this.clear,
+      onWords: () => this.buildTokens('words', words),
+      onSentences: () => this.buildTokens('sentence', sentences),
+      onParagraphs: () => this.buildTokens('paragraphs', paragraphs),
+      setCorrectMode: setCorrectMode,
+      onToggleCorrectMode: this.toggleCorrectMode
+    }), /*#__PURE__*/React.createElement(TokenText, {
+      className: tokenClassName,
+      text: text,
+      tokens: tokens,
+      onTokenClick: this.tokenClick,
+      onSelectToken: this.selectToken
+    }));
+  }
+
+}
+Tokenizer.propTypes = {
+  text: PropTypes.string.isRequired,
+  tokens: PropTypes.arrayOf(PropTypes.shape({
+    text: PropTypes.string,
+    correct: PropTypes.bool,
+    start: PropTypes.number,
+    end: PropTypes.number
+  })),
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  onChange: PropTypes.func.isRequired
+};
+Tokenizer.defaultProps = {};
+var index = withStyles(() => ({
+  text: {
+    whiteSpace: 'pre-wrap'
+  },
+  noselect: _extends({}, noSelect())
+}))(Tokenizer);
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+var Check$1 = {};
+
+var interopRequireDefault = {exports: {}};
+
+var hasRequiredInteropRequireDefault;
+
+function requireInteropRequireDefault () {
+	if (hasRequiredInteropRequireDefault) return interopRequireDefault.exports;
+	hasRequiredInteropRequireDefault = 1;
+	(function (module) {
+		function _interopRequireDefault(obj) {
+		  return obj && obj.__esModule ? obj : {
+		    "default": obj
+		  };
+		}
+
+		module.exports = _interopRequireDefault, module.exports.__esModule = true, module.exports["default"] = module.exports; 
+	} (interopRequireDefault));
+	return interopRequireDefault.exports;
+}
+
+var createSvgIcon = {};
+
+var pure = {};
+
+var shouldUpdate = {};
+
+var inheritsLoose = {exports: {}};
+
+var setPrototypeOf = {exports: {}};
+
+var hasRequiredSetPrototypeOf;
+
+function requireSetPrototypeOf () {
+	if (hasRequiredSetPrototypeOf) return setPrototypeOf.exports;
+	hasRequiredSetPrototypeOf = 1;
+	(function (module) {
+		function _setPrototypeOf(o, p) {
+		  module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+		    o.__proto__ = p;
+		    return o;
+		  }, module.exports.__esModule = true, module.exports["default"] = module.exports;
+		  return _setPrototypeOf(o, p);
+		}
+
+		module.exports = _setPrototypeOf, module.exports.__esModule = true, module.exports["default"] = module.exports; 
+	} (setPrototypeOf));
+	return setPrototypeOf.exports;
+}
+
+var hasRequiredInheritsLoose;
+
+function requireInheritsLoose () {
+	if (hasRequiredInheritsLoose) return inheritsLoose.exports;
+	hasRequiredInheritsLoose = 1;
+	(function (module) {
+		var setPrototypeOf = requireSetPrototypeOf();
+
+		function _inheritsLoose(subClass, superClass) {
+		  subClass.prototype = Object.create(superClass.prototype);
+		  subClass.prototype.constructor = subClass;
+		  setPrototypeOf(subClass, superClass);
+		}
+
+		module.exports = _inheritsLoose, module.exports.__esModule = true, module.exports["default"] = module.exports; 
+	} (inheritsLoose));
+	return inheritsLoose.exports;
+}
+
+var setDisplayName = {};
+
+var setStatic = {};
+
+var hasRequiredSetStatic;
+
+function requireSetStatic () {
+	if (hasRequiredSetStatic) return setStatic;
+	hasRequiredSetStatic = 1;
+
+	setStatic.__esModule = true;
+	setStatic.default = void 0;
+
+	var setStatic$1 = function setStatic(key, value) {
+	  return function (BaseComponent) {
+	    /* eslint-disable no-param-reassign */
+	    BaseComponent[key] = value;
+	    /* eslint-enable no-param-reassign */
+
+	    return BaseComponent;
+	  };
+	};
+
+	var _default = setStatic$1;
+	setStatic.default = _default;
+	return setStatic;
+}
+
+var hasRequiredSetDisplayName;
+
+function requireSetDisplayName () {
+	if (hasRequiredSetDisplayName) return setDisplayName;
+	hasRequiredSetDisplayName = 1;
+
+	var _interopRequireDefault = requireInteropRequireDefault();
+
+	setDisplayName.__esModule = true;
+	setDisplayName.default = void 0;
+
+	var _setStatic = _interopRequireDefault(requireSetStatic());
+
+	var setDisplayName$1 = function setDisplayName(displayName) {
+	  return (0, _setStatic.default)('displayName', displayName);
+	};
+
+	var _default = setDisplayName$1;
+	setDisplayName.default = _default;
+	return setDisplayName;
+}
+
+var wrapDisplayName = {};
+
+var getDisplayName = {};
+
+var hasRequiredGetDisplayName;
+
+function requireGetDisplayName () {
+	if (hasRequiredGetDisplayName) return getDisplayName;
+	hasRequiredGetDisplayName = 1;
+
+	getDisplayName.__esModule = true;
+	getDisplayName.default = void 0;
+
+	var getDisplayName$1 = function getDisplayName(Component) {
+	  if (typeof Component === 'string') {
+	    return Component;
+	  }
+
+	  if (!Component) {
+	    return undefined;
+	  }
+
+	  return Component.displayName || Component.name || 'Component';
+	};
+
+	var _default = getDisplayName$1;
+	getDisplayName.default = _default;
+	return getDisplayName;
+}
+
+var hasRequiredWrapDisplayName;
+
+function requireWrapDisplayName () {
+	if (hasRequiredWrapDisplayName) return wrapDisplayName;
+	hasRequiredWrapDisplayName = 1;
+
+	var _interopRequireDefault = requireInteropRequireDefault();
+
+	wrapDisplayName.__esModule = true;
+	wrapDisplayName.default = void 0;
+
+	var _getDisplayName = _interopRequireDefault(requireGetDisplayName());
+
+	var wrapDisplayName$1 = function wrapDisplayName(BaseComponent, hocName) {
+	  return hocName + "(" + (0, _getDisplayName.default)(BaseComponent) + ")";
+	};
+
+	var _default = wrapDisplayName$1;
+	wrapDisplayName.default = _default;
+	return wrapDisplayName;
+}
+
+var hasRequiredShouldUpdate;
+
+function requireShouldUpdate () {
+	if (hasRequiredShouldUpdate) return shouldUpdate;
+	hasRequiredShouldUpdate = 1;
+
+	var _interopRequireDefault = requireInteropRequireDefault();
+
+	shouldUpdate.__esModule = true;
+	shouldUpdate.default = void 0;
+
+	var _inheritsLoose2 = _interopRequireDefault(requireInheritsLoose());
+
+	var _react = React;
+
+	var _setDisplayName = _interopRequireDefault(requireSetDisplayName());
+
+	var _wrapDisplayName = _interopRequireDefault(requireWrapDisplayName());
+
+	var shouldUpdate$1 = function shouldUpdate(test) {
+	  return function (BaseComponent) {
+	    var factory = (0, _react.createFactory)(BaseComponent);
+
+	    var ShouldUpdate =
+	    /*#__PURE__*/
+	    function (_Component) {
+	      (0, _inheritsLoose2.default)(ShouldUpdate, _Component);
+
+	      function ShouldUpdate() {
+	        return _Component.apply(this, arguments) || this;
+	      }
+
+	      var _proto = ShouldUpdate.prototype;
+
+	      _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
+	        return test(this.props, nextProps);
+	      };
+
+	      _proto.render = function render() {
+	        return factory(this.props);
+	      };
+
+	      return ShouldUpdate;
+	    }(_react.Component);
+
+	    if (process.env.NODE_ENV !== 'production') {
+	      return (0, _setDisplayName.default)((0, _wrapDisplayName.default)(BaseComponent, 'shouldUpdate'))(ShouldUpdate);
+	    }
+
+	    return ShouldUpdate;
+	  };
+	};
+
+	var _default = shouldUpdate$1;
+	shouldUpdate.default = _default;
+	return shouldUpdate;
+}
+
+var shallowEqual = {};
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @typechecks
+ * 
+ */
+
+var shallowEqual_1;
+var hasRequiredShallowEqual$1;
+
+function requireShallowEqual$1 () {
+	if (hasRequiredShallowEqual$1) return shallowEqual_1;
+	hasRequiredShallowEqual$1 = 1;
+
+	var hasOwnProperty = Object.prototype.hasOwnProperty;
+
+	/**
+	 * inlined Object.is polyfill to avoid requiring consumers ship their own
+	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+	 */
+	function is(x, y) {
+	  // SameValue algorithm
+	  if (x === y) {
+	    // Steps 1-5, 7-10
+	    // Steps 6.b-6.e: +0 != -0
+	    // Added the nonzero y check to make Flow happy, but it is redundant
+	    return x !== 0 || y !== 0 || 1 / x === 1 / y;
+	  } else {
+	    // Step 6.a: NaN == NaN
+	    return x !== x && y !== y;
+	  }
+	}
+
+	/**
+	 * Performs equality by iterating through keys on an object and returning false
+	 * when any key has values which are not strictly equal between the arguments.
+	 * Returns true when the values of all keys are strictly equal.
+	 */
+	function shallowEqual(objA, objB) {
+	  if (is(objA, objB)) {
+	    return true;
+	  }
+
+	  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+	    return false;
+	  }
+
+	  var keysA = Object.keys(objA);
+	  var keysB = Object.keys(objB);
+
+	  if (keysA.length !== keysB.length) {
+	    return false;
+	  }
+
+	  // Test for A's keys different from B.
+	  for (var i = 0; i < keysA.length; i++) {
+	    if (!hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
+	      return false;
+	    }
+	  }
+
+	  return true;
+	}
+
+	shallowEqual_1 = shallowEqual;
+	return shallowEqual_1;
+}
+
+var hasRequiredShallowEqual;
+
+function requireShallowEqual () {
+	if (hasRequiredShallowEqual) return shallowEqual;
+	hasRequiredShallowEqual = 1;
+
+	var _interopRequireDefault = requireInteropRequireDefault();
+
+	shallowEqual.__esModule = true;
+	shallowEqual.default = void 0;
+
+	var _shallowEqual = _interopRequireDefault(requireShallowEqual$1());
+
+	var _default = _shallowEqual.default;
+	shallowEqual.default = _default;
+	return shallowEqual;
+}
+
+var hasRequiredPure;
+
+function requirePure () {
+	if (hasRequiredPure) return pure;
+	hasRequiredPure = 1;
+
+	var _interopRequireDefault = requireInteropRequireDefault();
+
+	pure.__esModule = true;
+	pure.default = void 0;
+
+	var _shouldUpdate = _interopRequireDefault(requireShouldUpdate());
+
+	var _shallowEqual = _interopRequireDefault(requireShallowEqual());
+
+	var _setDisplayName = _interopRequireDefault(requireSetDisplayName());
+
+	var _wrapDisplayName = _interopRequireDefault(requireWrapDisplayName());
+
+	var pure$1 = function pure(BaseComponent) {
+	  var hoc = (0, _shouldUpdate.default)(function (props, nextProps) {
+	    return !(0, _shallowEqual.default)(props, nextProps);
+	  });
+
+	  if (process.env.NODE_ENV !== 'production') {
+	    return (0, _setDisplayName.default)((0, _wrapDisplayName.default)(BaseComponent, 'pure'))(hoc(BaseComponent));
+	  }
+
+	  return hoc(BaseComponent);
+	};
+
+	var _default = pure$1;
+	pure.default = _default;
+	return pure;
+}
+
+var hasRequiredCreateSvgIcon;
+
+function requireCreateSvgIcon () {
+	if (hasRequiredCreateSvgIcon) return createSvgIcon;
+	hasRequiredCreateSvgIcon = 1;
+
+	var _interopRequireDefault = requireInteropRequireDefault();
+
+	Object.defineProperty(createSvgIcon, "__esModule", {
+	  value: true
+	});
+	createSvgIcon.default = void 0;
+
+	var _react = _interopRequireDefault(React);
+
+	var _pure = _interopRequireDefault(requirePure());
+
+	var _SvgIcon = _interopRequireDefault(require$$3);
+
+	function createSvgIcon$1(path, displayName) {
+	  var Icon = function Icon(props) {
+	    return _react.default.createElement(_SvgIcon.default, props, path);
+	  };
+
+	  Icon.displayName = "".concat(displayName, "Icon");
+	  Icon = (0, _pure.default)(Icon);
+	  Icon.muiName = 'SvgIcon';
+	  return Icon;
+	}
+	var _default = createSvgIcon$1;
+	createSvgIcon.default = _default;
+	return createSvgIcon;
+}
+
+var hasRequiredCheck;
+
+function requireCheck () {
+	if (hasRequiredCheck) return Check$1;
+	hasRequiredCheck = 1;
+
+	var _interopRequireDefault = requireInteropRequireDefault();
+
+	Object.defineProperty(Check$1, "__esModule", {
+	  value: true
+	});
+	Check$1.default = void 0;
+
+	var _react = _interopRequireDefault(React);
+
+	var _createSvgIcon = _interopRequireDefault(/*@__PURE__*/ requireCreateSvgIcon());
+
+	var _default = (0, _createSvgIcon.default)(_react.default.createElement(_react.default.Fragment, null, _react.default.createElement("path", {
+	  fill: "none",
+	  d: "M0 0h24v24H0z"
+	}), _react.default.createElement("path", {
+	  d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+	})), 'Check');
+
+	Check$1.default = _default;
+	return Check$1;
+}
+
+var CheckExports = /*@__PURE__*/ requireCheck();
+var Check = /*@__PURE__*/getDefaultExportFromCjs(CheckExports);
+
+var Close$1 = {};
+
+var hasRequiredClose;
+
+function requireClose () {
+	if (hasRequiredClose) return Close$1;
+	hasRequiredClose = 1;
+
+	var _interopRequireDefault = requireInteropRequireDefault();
+
+	Object.defineProperty(Close$1, "__esModule", {
+	  value: true
+	});
+	Close$1.default = void 0;
+
+	var _react = _interopRequireDefault(React);
+
+	var _createSvgIcon = _interopRequireDefault(/*@__PURE__*/ requireCreateSvgIcon());
+
+	var _default = (0, _createSvgIcon.default)(_react.default.createElement(_react.default.Fragment, null, _react.default.createElement("path", {
+	  d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+	}), _react.default.createElement("path", {
+	  fill: "none",
+	  d: "M0 0h24v24H0z"
+	})), 'Close');
+
+	Close$1.default = _default;
+	return Close$1;
+}
+
+var CloseExports = /*@__PURE__*/ requireClose();
+var Close = /*@__PURE__*/getDefaultExportFromCjs(CloseExports);
+
+const LINE_HEIGHT_MULTIPLIER = 3.2; // we need a bit more space for correctness indicators
+
+const CORRECTNESS_LINE_HEIGHT_MULTIPLIER = 3.4;
+const CORRECTNESS_PADDING = 2;
+
+const Wrapper = ({
+  useWrapper,
+  children,
+  classNameContainer,
+  iconClass,
+  Icon
+}) => useWrapper ? /*#__PURE__*/React.createElement("span", {
+  className: classNameContainer
+}, children, /*#__PURE__*/React.createElement(Icon, {
+  className: iconClass
+})) : children;
+
+Wrapper.propTypes = {
+  useWrapper: PropTypes.bool,
+  classNameContainer: PropTypes.string,
+  iconClass: PropTypes.string,
+  Icon: PropTypes.func,
+  children: PropTypes.element
+};
+const TokenTypes = {
+  text: PropTypes.string,
+  selectable: PropTypes.bool
+};
+class Token extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.getClassAndIconConfig = () => {
+      const {
+        selectable,
+        selected,
+        classes,
+        className: classNameProp,
+        disabled,
+        highlight,
+        correct,
+        animationsDisabled,
+        isMissing
+      } = this.props;
+      const isTouchEnabled = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+      const baseClassName = Token.rootClassName;
+      let classNameContainer;
+      let Icon;
+      let iconClass;
+
+      if (correct === undefined && selected && disabled) {
+        return {
+          className: classNames(classes.token, classes.selected, classes.disabledBlack)
+        };
+      }
+
+      if (correct !== undefined) {
+        const isCorrect = correct === true;
+        return {
+          className: classNames(baseClassName, classes.custom),
+          classNameContainer: classNames(isCorrect ? classes.correct : classes.incorrect, classes.commonTokenStyle),
+          Icon: isCorrect ? Check : Close,
+          iconClass: classNames(classes.correctnessIndicatorIcon, isCorrect ? classes.correctIcon : classes.incorrectIcon)
+        };
+      }
+
+      if (isMissing) {
+        return {
+          className: classNames(baseClassName, classes.custom, classes.missing, classes.commonTokenStyle),
+          classNameContainer: classes.commonTokenStyle,
+          Icon: Close,
+          iconClass: classNames(classes.correctnessIndicatorIcon, classes.incorrectIcon)
+        };
+      }
+
+      return {
+        className: classNames(baseClassName, classes.token, disabled && classes.disabled, selectable && !disabled && !isTouchEnabled && classes.selectable, selected && !disabled && classes.selected, selected && disabled && classes.disabledAndSelected, highlight && selectable && !disabled && !selected && classes.highlight, animationsDisabled && classes.print, classNameProp),
+        classNameContainer,
+        Icon,
+        iconClass
+      };
+    };
+  }
+
+  render() {
+    const {
+      text,
+      index,
+      correct,
+      isMissing
+    } = this.props;
+    const {
+      className,
+      classNameContainer,
+      Icon,
+      iconClass
+    } = this.getClassAndIconConfig();
+    return /*#__PURE__*/React.createElement(Wrapper, {
+      useWrapper: correct !== undefined || isMissing,
+      classNameContainer: classNameContainer,
+      iconClass: iconClass,
+      Icon: Icon
+    }, /*#__PURE__*/React.createElement("span", {
+      className: className,
+      dangerouslySetInnerHTML: {
+        __html: (text || '').replace(/\n/g, '<br>')
+      },
+      "data-indexkey": index
+    }));
+  }
+
+}
+Token.rootClassName = 'tokenRootClass';
+Token.propTypes = _extends({}, TokenTypes, {
+  classes: PropTypes.object.isRequired,
+  text: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  highlight: PropTypes.bool,
+  correct: PropTypes.bool
+});
+Token.defaultProps = {
+  selectable: false,
+  text: ''
+};
+var Token$1 = withStyles(theme => {
+  return {
+    token: {
+      cursor: 'pointer',
+      textIndent: 0
+    },
+    disabled: {
+      cursor: 'inherit',
+      color: color.disabled()
+    },
+    disabledBlack: {
+      cursor: 'inherit'
+    },
+    disabledAndSelected: {
+      backgroundColor: color.blueGrey100()
+    },
+    selectable: {
+      [theme.breakpoints.up(769)]: {
+        '&:hover': {
+          backgroundColor: color.blueGrey300(),
+          color: theme.palette.common.black,
+          '& > *': {
+            backgroundColor: color.blueGrey300()
+          }
+        }
+      }
+    },
+    selected: {
+      backgroundColor: color.blueGrey100(),
+      color: theme.palette.common.black,
+      lineHeight: `${theme.spacing.unit * LINE_HEIGHT_MULTIPLIER}px`,
+      border: `solid 2px ${color.blueGrey900()}`,
+      borderRadius: '4px',
+      '& > *': {
+        backgroundColor: color.blueGrey100()
+      }
+    },
+    highlight: {
+      border: `dashed 2px ${color.blueGrey600()}`,
+      borderRadius: '4px',
+      lineHeight: `${theme.spacing.unit * LINE_HEIGHT_MULTIPLIER}px`
+    },
+    print: {
+      border: `dashed 2px ${color.blueGrey600()}`,
+      borderRadius: '4px',
+      lineHeight: `${theme.spacing.unit * LINE_HEIGHT_MULTIPLIER}px`,
+      color: color.text()
+    },
+    custom: {
+      display: 'initial'
+    },
+    commonTokenStyle: {
+      position: 'relative',
+      borderRadius: '4px',
+      color: theme.palette.common.black,
+      lineHeight: `${theme.spacing.unit * CORRECTNESS_LINE_HEIGHT_MULTIPLIER + CORRECTNESS_PADDING}px`,
+      padding: `${CORRECTNESS_PADDING}px`
+    },
+    correct: {
+      border: `${color.correctTertiary()} solid 2px`
+    },
+    incorrect: {
+      border: `${color.incorrectWithIcon()} solid 2px`
+    },
+    missing: {
+      border: `${color.incorrectWithIcon()} dashed 2px`
+    },
+    incorrectIcon: {
+      backgroundColor: color.incorrectWithIcon()
+    },
+    correctIcon: {
+      backgroundColor: color.correctTertiary()
+    },
+    correctnessIndicatorIcon: {
+      color: color.white(),
+      position: 'absolute',
+      top: '-8px',
+      left: '-8px',
+      borderRadius: '50%',
+      fontSize: '12px',
+      padding: '2px'
+    }
+  };
+})(Token);
+
+const log$1 = debug('@pie-lib:text-select:token-select');
+class TokenSelect extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.selectedCount = () => this.props.tokens.filter(t => t.selected).length;
+
+    this.canSelectMore = selectedCount => {
+      const {
+        maxNoOfSelections
+      } = this.props;
+
+      if (maxNoOfSelections === 1) {
+        return true;
+      }
+
+      log$1('[canSelectMore] maxNoOfSelections: ', maxNoOfSelections, 'selectedCount: ', selectedCount);
+      return maxNoOfSelections <= 0 || isFinite(maxNoOfSelections) && selectedCount < maxNoOfSelections;
+    };
+
+    this.toggleToken = event => {
+      const {
+        target
+      } = event;
+      const {
+        tokens,
+        animationsDisabled
+      } = this.props;
+      const tokensCloned = clone(tokens);
+      const targetSpanWrapper = target.closest(`.${Token$1.rootClassName}`);
+      const targetedTokenIndex = targetSpanWrapper && targetSpanWrapper.dataset && targetSpanWrapper.dataset.indexkey;
+      const t = targetedTokenIndex && tokensCloned[targetedTokenIndex]; // don't toggle if we are in print mode, token correctness is defined or if it's missing
+      // (missing means that it was evaluated as correct and not selected)
+
+      if (t && t.correct === undefined && !animationsDisabled && !t.isMissing) {
+        const {
+          onChange,
+          maxNoOfSelections
+        } = this.props;
+        const selected = !t.selected;
+
+        if (maxNoOfSelections === 1 && this.selectedCount() === 1) {
+          const selectedToken = (tokens || []).filter(t => t.selected);
+          const updatedTokens = tokensCloned.map(token => {
+            if (isEqual(token, selectedToken[0])) {
+              return _extends({}, token, {
+                selected: false
+              });
+            }
+
+            return _extends({}, token, {
+              selectable: true
+            });
+          });
+
+          const update = _extends({}, t, {
+            selected: !t.selected
+          });
+
+          updatedTokens.splice(targetedTokenIndex, 1, update);
+          onChange(updatedTokens);
+        } else {
+          if (selected && maxNoOfSelections > 0 && this.selectedCount() >= maxNoOfSelections) {
+            log$1('skip toggle max reached');
+            return;
+          }
+
+          const update = _extends({}, t, {
+            selected: !t.selected
+          });
+
+          tokensCloned.splice(targetedTokenIndex, 1, update);
+          onChange(tokensCloned);
+        }
+      }
+    };
+
+    this.generateTokensInHtml = () => {
+      const {
+        tokens,
+        disabled,
+        highlightChoices,
+        animationsDisabled
+      } = this.props;
+      const selectedCount = this.selectedCount();
+
+      const isLineBreak = text => text === '\n';
+
+      const isNewParagraph = text => text === '\n\n';
+
+      const reducer = (accumulator, t, index) => {
+        const selectable = t.selected || t.selectable && this.canSelectMore(selectedCount);
+        const showCorrectAnswer = t.correct !== undefined && (t.selectable || t.selected);
+        let finalAcc = accumulator;
+
+        if (isNewParagraph(t.text)) {
+          return finalAcc + '</p><p>';
+        }
+
+        if (isLineBreak(t.text)) {
+          return finalAcc + '<br>';
+        }
+
+        if (selectable && !disabled || showCorrectAnswer || t.selected || t.isMissing || animationsDisabled && t.predefined // if we are in print mode
+        ) {
+          return finalAcc + renderToString( /*#__PURE__*/React.createElement(Token$1, _extends({
+            key: index,
+            disabled: disabled,
+            index: index
+          }, t, {
+            selectable: selectable,
+            highlight: highlightChoices,
+            animationsDisabled: animationsDisabled
+          })));
+        } else {
+          return accumulator + t.text;
+        }
+      };
+
+      const reduceResult = (tokens || []).reduce(reducer, '<p>');
+      return reduceResult + '</p>';
+    };
+  }
+
+  render() {
+    const {
+      classes,
+      className: classNameProp
+    } = this.props;
+    const className = classNames(classes.tokenSelect, classNameProp);
+    const html = this.generateTokensInHtml();
+    return /*#__PURE__*/React.createElement("div", {
+      className: className,
+      dangerouslySetInnerHTML: {
+        __html: html
+      },
+      onClick: this.toggleToken
+    });
+  }
+
+}
+TokenSelect.propTypes = {
+  tokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,
+  className: PropTypes.string,
+  classes: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
+  highlightChoices: PropTypes.bool,
+  animationsDisabled: PropTypes.bool,
+  maxNoOfSelections: PropTypes.number
+};
+TokenSelect.defaultProps = {
+  highlightChoices: false,
+  maxNoOfSelections: 0,
+  tokens: []
+};
+var TokenSelect$1 = withStyles(() => ({
+  tokenSelect: _extends({
+    backgroundColor: 'none',
+    whiteSpace: 'pre'
+  }, noSelect(), {
+    '& p': {
+      whiteSpace: 'break-spaces'
+    }
+  })
+}))(TokenSelect); // Re-export TokenTypes for external use
+
+const log = debug('@pie-lib:text-select');
+/**
+ * Built on TokenSelect uses build.normalize to build the token set.
+ */
+
+class TextSelect extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.change = tokens => {
+      const {
+        onChange
+      } = this.props;
+
+      if (!onChange) {
+        return;
+      }
+
+      const out = tokens.filter(t => t.selected).map(t => ({
+        start: t.start,
+        end: t.end
+      }));
+      onChange(out);
+    };
+  }
+
+  render() {
+    const {
+      text,
+      disabled,
+      tokens,
+      selectedTokens,
+      className,
+      highlightChoices,
+      maxNoOfSelections,
+      animationsDisabled
+    } = this.props;
+    const normalized = normalize(text, tokens);
+    log('normalized: ', normalized);
+    const prepped = normalized.map(t => {
+      const selectedIndex = selectedTokens.findIndex(s => {
+        return s.start === t.start && s.end === t.end;
+      });
+      const selected = selectedIndex !== -1;
+      const correct = selected ? t.correct : undefined;
+      const isMissing = t.isMissing;
+      return _extends({}, t, {
+        selectable: !disabled && t.predefined,
+        selected,
+        correct,
+        isMissing
+      });
+    });
+    return /*#__PURE__*/React.createElement(TokenSelect$1, {
+      highlightChoices: !disabled && highlightChoices,
+      className: className,
+      tokens: prepped,
+      disabled: disabled,
+      onChange: this.change,
+      maxNoOfSelections: maxNoOfSelections,
+      animationsDisabled: animationsDisabled
+    });
+  }
+
+}
+TextSelect.propTypes = {
+  onChange: PropTypes.func,
+  disabled: PropTypes.bool,
+  tokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,
+  selectedTokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,
+  text: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  highlightChoices: PropTypes.bool,
+  animationsDisabled: PropTypes.bool,
+  maxNoOfSelections: PropTypes.number
+};
+
+const {
+  translator
+} = Translator;
+const Legend = withStyles(theme => ({
+  flexContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: `${2 * theme.spacing.unit}px`,
+    borderBottom: '1px solid lightgrey',
+    borderTop: '1px solid lightgrey',
+    paddingBottom: theme.spacing.unit,
+    paddingTop: theme.spacing.unit,
+    marginBottom: theme.spacing.unit
+  },
+  key: {
+    fontSize: '14px',
+    fontWeight: 'bold',
+    color: color.black(),
+    marginLeft: theme.spacing.unit
+  },
+  container: {
+    position: 'relative',
+    padding: '4px',
+    fontSize: '14px',
+    borderRadius: '4px'
+  },
+  correct: {
+    border: `${color.correctTertiary()} solid 2px`
+  },
+  incorrect: {
+    border: `${color.incorrectWithIcon()} solid 2px`
+  },
+  missing: {
+    border: `${color.incorrectWithIcon()} dashed 2px`
+  },
+  incorrectIcon: {
+    backgroundColor: color.incorrectWithIcon()
+  },
+  correctIcon: {
+    backgroundColor: color.correctTertiary()
+  },
+  icon: {
+    color: color.white(),
+    position: 'absolute',
+    top: '-8px',
+    left: '-8px',
+    borderRadius: '50%',
+    fontSize: '12px',
+    padding: '2px'
+  }
+}))(({
+  classes,
+  language,
+  showOnlyCorrect
+}) => {
+  const legendItems = [{
+    Icon: Check,
+    label: translator.t('selectText.correctAnswerSelected', {
+      lng: language
+    }),
+    containerClass: classNames(classes.correct, classes.container),
+    iconClass: classNames(classes.correctIcon, classes.icon)
+  }, {
+    Icon: Close,
+    label: translator.t('selectText.incorrectSelection', {
+      lng: language
+    }),
+    containerClass: classNames(classes.incorrect, classes.container),
+    iconClass: classNames(classes.incorrectIcon, classes.icon)
+  }, {
+    Icon: Close,
+    label: translator.t('selectText.correctAnswerNotSelected', {
+      lng: language
+    }),
+    containerClass: classNames(classes.missing, classes.container),
+    iconClass: classNames(classes.incorrectIcon, classes.icon)
+  }];
+
+  if (showOnlyCorrect) {
+    legendItems.splice(1, 2);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.flexContainer
+  }, /*#__PURE__*/React.createElement("span", {
+    className: classes.key
+  }, translator.t('selectText.key', {
+    lng: language
+  })), legendItems.map(({
+    Icon,
+    label,
+    containerClass,
+    iconClass
+  }, idx) => /*#__PURE__*/React.createElement("div", {
+    key: idx,
+    className: containerClass
+  }, /*#__PURE__*/React.createElement(Icon, {
+    className: iconClass
+  }), /*#__PURE__*/React.createElement("span", null, label))));
+});
+
+const createElementFromHTML = (htmlString = '') => {
+  const div = document.createElement('div');
+  div.innerHTML = htmlString.trim();
+  return div;
+};
+
+const parseBrs = dom => {
+  const brs = dom.querySelectorAll('br');
+  brs.forEach(br => br.replaceWith('\n'));
+  dom.innerHTML = dom.innerHTML.replace(/\n\n/g, '\n');
+};
+const parseParagraph = (paragraph, end) => {
+  if (end) {
+    return paragraph.innerHTML;
+  }
+
+  return `${paragraph.innerHTML}\n\n`;
+};
+const parseParagraphs = dom => {
+  const paragraphs = dom.querySelectorAll('p'); // separate variable for easily debugging, if needed
+
+  let str = '';
+  paragraphs.forEach((par, index) => {
+    str += parseParagraph(par, index === paragraphs.length - 1);
+  });
+  return str || null;
+};
+const prepareText = text => {
+  let txtDom = createElementFromHTML(text);
+  const allDomElements = Array.from(txtDom.querySelectorAll('*'));
+
+  if (txtDom.querySelectorAll('p').length === 0) {
+    const div = document.createElement('div');
+    div.innerHTML = `<p>${txtDom.innerHTML}</p>`;
+    txtDom = div;
+  } // if no dom elements, we just return the text
+
+
+  if (allDomElements.length === 0) {
+    return text;
+  }
+
+  parseBrs(txtDom);
+  return parseParagraphs(txtDom);
+};
+
+export { Legend, TextSelect, Token$1 as Token, TokenSelect$1 as TokenSelect, TokenTypes, index as Tokenizer, prepareText };
+//# sourceMappingURL=index.js.map