@pie-lib/text-select 1.29.0 → 1.29.1

package/esm/index.js

@@ -0,0 +1,1307 @@
+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 Check from '@material-ui/icons/Check';
+import Close from '@material-ui/icons/Close';
+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);
+
+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