@pie-lib/text-select 1.13.0-beta.2 → 1.13.0-beta.3

package/lib/tokenizer/controls.js

@@ -0,0 +1,137 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Controls = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _Switch = _interopRequireDefault(require("@material-ui/core/Switch"));
+
+var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
+
+var _renderUi = require("@pie-lib/render-ui");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var Controls = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Controls, _React$Component);
+
+  var _super = _createSuper(Controls);
+
+  function Controls() {
+    (0, _classCallCheck2["default"])(this, Controls);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2["default"])(Controls, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          onClear = _this$props.onClear,
+          onWords = _this$props.onWords,
+          onSentences = _this$props.onSentences,
+          onParagraphs = _this$props.onParagraphs,
+          setCorrectMode = _this$props.setCorrectMode,
+          onToggleCorrectMode = _this$props.onToggleCorrectMode;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.controls
+      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+        onClick: onWords,
+        className: classes.button,
+        size: "small",
+        color: "primary",
+        disabled: setCorrectMode
+      }, "Words"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+        onClick: onSentences,
+        className: classes.button,
+        size: "small",
+        color: "primary",
+        disabled: setCorrectMode
+      }, "Sentences"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+        onClick: onParagraphs,
+        className: classes.button,
+        size: "small",
+        color: "primary",
+        disabled: setCorrectMode
+      }, "Paragraphs"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+        className: classes.button,
+        size: "small",
+        color: "secondary",
+        onClick: onClear,
+        disabled: setCorrectMode
+      }, "Clear")), /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
+        control: /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+          classes: {
+            checked: classes.checkedThumb,
+            bar: (0, _classnames["default"])((0, _defineProperty2["default"])({}, classes.checkedBar, setCorrectMode))
+          },
+          checked: setCorrectMode,
+          onChange: onToggleCorrectMode
+        }),
+        label: "Set correct answers"
+      }));
+    }
+  }]);
+  return Controls;
+}(_react["default"].Component);
+
+exports.Controls = Controls;
+(0, _defineProperty2["default"])(Controls, "propTypes", {
+  classes: _propTypes["default"].object.isRequired,
+  onClear: _propTypes["default"].func.isRequired,
+  onWords: _propTypes["default"].func.isRequired,
+  onSentences: _propTypes["default"].func.isRequired,
+  onParagraphs: _propTypes["default"].func.isRequired,
+  setCorrectMode: _propTypes["default"].bool.isRequired,
+  onToggleCorrectMode: _propTypes["default"].func.isRequired
+});
+(0, _defineProperty2["default"])(Controls, "defaultProps", {});
+
+var _default = (0, _styles.withStyles)(function (theme) {
+  return {
+    button: {
+      marginRight: theme.spacing.unit
+    },
+    controls: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between'
+    },
+    checkedThumb: {
+      color: "".concat(_renderUi.color.tertiary(), " !important")
+    },
+    checkedBar: {
+      backgroundColor: "".concat(_renderUi.color.tertiaryLight(), " !important")
+    }
+  };
+})(Controls);
+
+exports["default"] = _default;
+//# sourceMappingURL=controls.js.map

package/lib/tokenizer/controls.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tokenizer/controls.jsx"],"names":["Controls","props","classes","onClear","onWords","onSentences","onParagraphs","setCorrectMode","onToggleCorrectMode","controls","button","checked","checkedThumb","bar","checkedBar","React","Component","PropTypes","object","isRequired","func","bool","theme","marginRight","spacing","unit","display","alignItems","justifyContent","color","tertiary","backgroundColor","tertiaryLight"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@material-ui/core/Button';\nimport { withStyles } from '@material-ui/core/styles';\nimport Switch from '@material-ui/core/Switch';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport { color } from '@pie-lib/render-ui';\nimport classNames from 'classnames';\n\nexport class Controls extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    onClear: PropTypes.func.isRequired,\n    onWords: PropTypes.func.isRequired,\n    onSentences: PropTypes.func.isRequired,\n    onParagraphs: PropTypes.func.isRequired,\n    setCorrectMode: PropTypes.bool.isRequired,\n    onToggleCorrectMode: PropTypes.func.isRequired,\n  };\n\n  static defaultProps = {};\n\n  render() {\n    const { classes, onClear, onWords, onSentences, onParagraphs, setCorrectMode, onToggleCorrectMode } = this.props;\n\n    return (\n      <div className={classes.controls}>\n        <div>\n          <Button onClick={onWords} className={classes.button} size=\"small\" color=\"primary\" disabled={setCorrectMode}>\n            Words\n          </Button>\n          <Button\n            onClick={onSentences}\n            className={classes.button}\n            size=\"small\"\n            color=\"primary\"\n            disabled={setCorrectMode}\n          >\n            Sentences\n          </Button>\n          <Button\n            onClick={onParagraphs}\n            className={classes.button}\n            size=\"small\"\n            color=\"primary\"\n            disabled={setCorrectMode}\n          >\n            Paragraphs\n          </Button>\n          <Button className={classes.button} size=\"small\" color=\"secondary\" onClick={onClear} disabled={setCorrectMode}>\n            Clear\n          </Button>\n        </div>\n        <FormControlLabel\n          control={\n            <Switch\n              classes={{\n                checked: classes.checkedThumb,\n                bar: classNames({\n                  [classes.checkedBar]: setCorrectMode,\n                }),\n              }}\n              checked={setCorrectMode}\n              onChange={onToggleCorrectMode}\n            />\n          }\n          label=\"Set correct answers\"\n        />\n      </div>\n    );\n  }\n}\nexport default withStyles((theme) => ({\n  button: {\n    marginRight: theme.spacing.unit,\n  },\n  controls: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  },\n  checkedThumb: {\n    color: `${color.tertiary()} !important`,\n  },\n  checkedBar: {\n    backgroundColor: `${color.tertiaryLight()} !important`,\n  },\n}))(Controls);\n"],"file":"controls.js"}

package/lib/tokenizer/index.js

@@ -0,0 +1,205 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Tokenizer = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _controls = _interopRequireDefault(require("./controls"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _builder = require("./builder");
+
+var _clone = _interopRequireDefault(require("lodash/clone"));
+
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+
+var _differenceWith = _interopRequireDefault(require("lodash/differenceWith"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _styleUtils = require("@pie-lib/style-utils");
+
+var _tokenText = _interopRequireDefault(require("./token-text"));
+
+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; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var Tokenizer = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Tokenizer, _React$Component);
+
+  var _super = _createSuper(Tokenizer);
+
+  function Tokenizer(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Tokenizer);
+    _this = _super.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChangeHandler", function (token, mode) {
+      _this.props.onChange(token, mode);
+
+      _this.setState({
+        mode: mode
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleCorrectMode", function () {
+      return _this.setState({
+        setCorrectMode: !_this.state.setCorrectMode
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "clear", function () {
+      _this.onChangeHandler([], '');
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "buildTokens", function (type, fn) {
+      var text = _this.props.text;
+      var tokens = fn(text);
+
+      _this.onChangeHandler(tokens, type);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "selectToken", function (newToken, tokensToRemove) {
+      var tokens = _this.props.tokens;
+      var update = (0, _differenceWith["default"])((0, _clone["default"])(tokens), tokensToRemove, _isEqual["default"]);
+      update.push(newToken);
+
+      _this.onChangeHandler(update, _this.state.mode);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "tokenClick", function (token) {
+      var setCorrectMode = _this.state.setCorrectMode;
+
+      if (setCorrectMode) {
+        _this.setCorrect(token);
+      } else {
+        _this.removeToken(token);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "tokenIndex", function (token) {
+      var tokens = _this.props.tokens;
+      return tokens.findIndex(function (t) {
+        return t.text == token.text && t.start == token.start && t.end == token.end;
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setCorrect", function (token) {
+      var tokens = _this.props.tokens;
+
+      var index = _this.tokenIndex(token);
+
+      if (index !== -1) {
+        var t = tokens[index];
+        t.correct = !t.correct;
+        var update = (0, _clone["default"])(tokens);
+        update.splice(index, 1, t);
+
+        _this.onChangeHandler(update, _this.state.mode);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "removeToken", function (token) {
+      var tokens = _this.props.tokens;
+
+      var index = _this.tokenIndex(token);
+
+      if (index !== -1) {
+        var update = (0, _clone["default"])(tokens);
+        update.splice(index, 1);
+
+        _this.onChangeHandler(update, _this.state.mode);
+      }
+    });
+    _this.state = {
+      setCorrectMode: false,
+      mode: ''
+    };
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Tokenizer, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          text = _this$props.text,
+          tokens = _this$props.tokens,
+          classes = _this$props.classes,
+          className = _this$props.className;
+      var setCorrectMode = this.state.setCorrectMode;
+      var tokenClassName = (0, _classnames["default"])(classes.text, setCorrectMode && classes.noselect);
+      var rootName = (0, _classnames["default"])(classes.tokenizer, className);
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: rootName
+      }, /*#__PURE__*/_react["default"].createElement(_controls["default"], {
+        onClear: this.clear,
+        onWords: function onWords() {
+          return _this2.buildTokens('words', _builder.words);
+        },
+        onSentences: function onSentences() {
+          return _this2.buildTokens('sentence', _builder.sentences);
+        },
+        onParagraphs: function onParagraphs() {
+          return _this2.buildTokens('paragraphs', _builder.paragraphs);
+        },
+        setCorrectMode: setCorrectMode,
+        onToggleCorrectMode: this.toggleCorrectMode
+      }), /*#__PURE__*/_react["default"].createElement(_tokenText["default"], {
+        className: tokenClassName,
+        text: text,
+        tokens: tokens,
+        onTokenClick: this.tokenClick,
+        onSelectToken: this.selectToken
+      }));
+    }
+  }]);
+  return Tokenizer;
+}(_react["default"].Component);
+
+exports.Tokenizer = Tokenizer;
+(0, _defineProperty2["default"])(Tokenizer, "propTypes", {
+  text: _propTypes["default"].string.isRequired,
+  tokens: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    text: _propTypes["default"].string,
+    correct: _propTypes["default"].bool,
+    start: _propTypes["default"].number,
+    end: _propTypes["default"].number
+  })),
+  classes: _propTypes["default"].object.isRequired,
+  className: _propTypes["default"].string,
+  onChange: _propTypes["default"].func.isRequired
+});
+(0, _defineProperty2["default"])(Tokenizer, "defaultProps", {});
+
+var _default = (0, _styles.withStyles)(function () {
+  return {
+    text: {
+      whiteSpace: 'pre-wrap'
+    },
+    noselect: _objectSpread({}, (0, _styleUtils.noSelect)())
+  };
+})(Tokenizer);
+
+exports["default"] = _default;
+//# sourceMappingURL=index.js.map

package/lib/tokenizer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tokenizer/index.jsx"],"names":["Tokenizer","props","token","mode","onChange","setState","setCorrectMode","state","onChangeHandler","type","fn","text","tokens","newToken","tokensToRemove","update","isEqual","push","setCorrect","removeToken","findIndex","t","start","end","index","tokenIndex","correct","splice","classes","className","tokenClassName","noselect","rootName","tokenizer","clear","buildTokens","words","sentences","paragraphs","toggleCorrectMode","tokenClick","selectToken","React","Component","PropTypes","string","isRequired","arrayOf","shape","bool","number","object","func","whiteSpace"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Controls from './controls';\nimport { withStyles } from '@material-ui/core/styles';\nimport { words, sentences, paragraphs } from './builder';\nimport clone from 'lodash/clone';\nimport isEqual from 'lodash/isEqual';\nimport differenceWith from 'lodash/differenceWith';\nimport classNames from 'classnames';\nimport { noSelect } from '@pie-lib/style-utils';\nimport TokenText from './token-text';\n\nexport class Tokenizer extends React.Component {\n  static propTypes = {\n    text: PropTypes.string.isRequired,\n    tokens: PropTypes.arrayOf(\n      PropTypes.shape({\n        text: PropTypes.string,\n        correct: PropTypes.bool,\n        start: PropTypes.number,\n        end: PropTypes.number,\n      }),\n    ),\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    onChange: PropTypes.func.isRequired,\n  };\n\n  static defaultProps = {};\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      setCorrectMode: false,\n      mode: '',\n    };\n  }\n\n  onChangeHandler = (token, mode) => {\n    this.props.onChange(token, mode);\n\n    this.setState({\n      mode,\n    });\n  };\n\n  toggleCorrectMode = () => this.setState({ setCorrectMode: !this.state.setCorrectMode });\n\n  clear = () => {\n    this.onChangeHandler([], '');\n  };\n\n  buildTokens = (type, fn) => {\n    const { text } = this.props;\n    const tokens = fn(text);\n\n    this.onChangeHandler(tokens, type);\n  };\n\n  selectToken = (newToken, tokensToRemove) => {\n    const { tokens } = this.props;\n    const update = differenceWith(clone(tokens), tokensToRemove, isEqual);\n\n    update.push(newToken);\n    this.onChangeHandler(update, this.state.mode);\n  };\n\n  tokenClick = (token) => {\n    const { setCorrectMode } = this.state;\n\n    if (setCorrectMode) {\n      this.setCorrect(token);\n    } else {\n      this.removeToken(token);\n    }\n  };\n\n  tokenIndex = (token) => {\n    const { tokens } = this.props;\n\n    return tokens.findIndex((t) => {\n      return t.text == token.text && t.start == token.start && t.end == token.end;\n    });\n  };\n\n  setCorrect = (token) => {\n    const { tokens } = this.props;\n    const index = this.tokenIndex(token);\n    if (index !== -1) {\n      const t = tokens[index];\n\n      t.correct = !t.correct;\n\n      const update = clone(tokens);\n\n      update.splice(index, 1, t);\n      this.onChangeHandler(update, this.state.mode);\n    }\n  };\n\n  removeToken = (token) => {\n    const { tokens } = this.props;\n\n    const index = this.tokenIndex(token);\n    if (index !== -1) {\n      const update = clone(tokens);\n\n      update.splice(index, 1);\n\n      this.onChangeHandler(update, this.state.mode);\n    }\n  };\n\n  render() {\n    const { text, tokens, classes, className } = this.props;\n    const { setCorrectMode } = this.state;\n\n    const tokenClassName = classNames(classes.text, setCorrectMode && classes.noselect);\n\n    const rootName = classNames(classes.tokenizer, className);\n\n    return (\n      <div className={rootName}>\n        <Controls\n          onClear={this.clear}\n          onWords={() => this.buildTokens('words', words)}\n          onSentences={() => this.buildTokens('sentence', sentences)}\n          onParagraphs={() => this.buildTokens('paragraphs', paragraphs)}\n          setCorrectMode={setCorrectMode}\n          onToggleCorrectMode={this.toggleCorrectMode}\n        />\n        <TokenText\n          className={tokenClassName}\n          text={text}\n          tokens={tokens}\n          onTokenClick={this.tokenClick}\n          onSelectToken={this.selectToken}\n        />\n      </div>\n    );\n  }\n}\n\nexport default withStyles(() => ({\n  text: {\n    whiteSpace: 'pre-wrap',\n  },\n  noselect: { ...noSelect() },\n}))(Tokenizer);\n"],"file":"index.js"}

package/lib/tokenizer/selection-utils.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCaretCharacterOffsetWithin = exports.clearSelection = void 0;
+
+var clearSelection = function 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();
+  }
+};
+
+exports.clearSelection = clearSelection;
+
+var getCaretCharacterOffsetWithin = function 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;
+};
+
+exports.getCaretCharacterOffsetWithin = getCaretCharacterOffsetWithin;
+//# sourceMappingURL=selection-utils.js.map

package/lib/tokenizer/selection-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tokenizer/selection-utils.js"],"names":["clearSelection","document","getSelection","removeAllRanges","addRange","createRange","window","empty","selection","getCaretCharacterOffsetWithin","element","caretOffset","doc","ownerDocument","win","defaultView","parentWindow","sel","rangeCount","range","getRangeAt","selected","toString","length","preCaretRange","cloneRange","selectNodeContents","setEnd","endContainer","endOffset","type","textRange","preCaretTextRange","body","createTextRange","moveToElementText","setEndPoint","text"],"mappings":";;;;;;;AAAO,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAClC,MAAIC,QAAQ,CAACC,YAAb,EAA2B;AACzB;AACAD,IAAAA,QAAQ,CAACC,YAAT,GAAwBC,eAAxB;AACAF,IAAAA,QAAQ,CAACC,YAAT,GAAwBE,QAAxB,CAAiCH,QAAQ,CAACI,WAAT,EAAjC;AACD,GAJD,MAIO,IAAIC,MAAM,CAACJ,YAAX,EAAyB;AAC9B;AACA,QAAII,MAAM,CAACJ,YAAP,GAAsBC,eAA1B,EAA2C;AACzC;AACAG,MAAAA,MAAM,CAACJ,YAAP,GAAsBC,eAAtB;AACAG,MAAAA,MAAM,CAACJ,YAAP,GAAsBE,QAAtB,CAA+BH,QAAQ,CAACI,WAAT,EAA/B;AACD,KAJD,MAIO,IAAIC,MAAM,CAACJ,YAAP,GAAsBK,KAA1B,EAAiC;AACtC;AACAD,MAAAA,MAAM,CAACJ,YAAP,GAAsBK,KAAtB;AACD;AACF,GAVM,MAUA,IAAIN,QAAQ,CAACO,SAAb,EAAwB;AAC7B;AACAP,IAAAA,QAAQ,CAACO,SAAT,CAAmBD,KAAnB;AACD;AACF,CAnBM;;;;AAqBA,IAAME,6BAA6B,GAAG,SAAhCA,6BAAgC,CAACC,OAAD,EAAa;AACxD,MAAIC,WAAW,GAAG,CAAlB;AACA,MAAIC,GAAG,GAAGF,OAAO,CAACG,aAAR,IAAyBH,OAAO,CAACT,QAA3C;AACA,MAAIa,GAAG,GAAGF,GAAG,CAACG,WAAJ,IAAmBH,GAAG,CAACI,YAAjC;AACA,MAAIC,GAAJ;;AACA,MAAI,OAAOH,GAAG,CAACZ,YAAX,KAA4B,WAAhC,EAA6C;AAC3Ce,IAAAA,GAAG,GAAGH,GAAG,CAACZ,YAAJ,EAAN;;AACA,QAAIe,GAAG,CAACC,UAAJ,GAAiB,CAArB,EAAwB;AACtB,UAAIC,KAAK,GAAGL,GAAG,CAACZ,YAAJ,GAAmBkB,UAAnB,CAA8B,CAA9B,CAAZ;AACA,UAAIC,QAAQ,GAAGF,KAAK,CAACG,QAAN,GAAiBC,MAAhC;AACA,UAAIC,aAAa,GAAGL,KAAK,CAACM,UAAN,EAApB;AACAD,MAAAA,aAAa,CAACE,kBAAd,CAAiChB,OAAjC;AACAc,MAAAA,aAAa,CAACG,MAAd,CAAqBR,KAAK,CAACS,YAA3B,EAAyCT,KAAK,CAACU,SAA/C;;AACA,UAAIR,QAAJ,EAAc;AACZV,QAAAA,WAAW,GAAGa,aAAa,CAACF,QAAd,GAAyBC,MAAzB,GAAkCF,QAAhD;AACD,OAFD,MAEO;AACLV,QAAAA,WAAW,GAAGa,aAAa,CAACF,QAAd,GAAyBC,MAAvC;AACD;AACF;AACF,GAdD,MAcO,IAAI,CAACN,GAAG,GAAGL,GAAG,CAACJ,SAAX,KAAyBS,GAAG,CAACa,IAAJ,KAAa,SAA1C,EAAqD;AAC1D,QAAIC,SAAS,GAAGd,GAAG,CAACZ,WAAJ,EAAhB;AACA,QAAI2B,iBAAiB,GAAGpB,GAAG,CAACqB,IAAJ,CAASC,eAAT,EAAxB;AACAF,IAAAA,iBAAiB,CAACG,iBAAlB,CAAoCzB,OAApC;AACAsB,IAAAA,iBAAiB,CAACI,WAAlB,CAA8B,UAA9B,EAA0CL,SAA1C;AACApB,IAAAA,WAAW,GAAGqB,iBAAiB,CAACK,IAAlB,CAAuBd,MAArC;AACD;;AACD,SAAOZ,WAAP;AACD,CA3BM","sourcesContent":["export const clearSelection = () => {\n  if (document.getSelection) {\n    // for all new browsers (IE9+, Chrome, Firefox)\n    document.getSelection().removeAllRanges();\n    document.getSelection().addRange(document.createRange());\n  } else if (window.getSelection) {\n    // equals with the document.getSelection (MSDN info)\n    if (window.getSelection().removeAllRanges) {\n      // for all new browsers (IE9+, Chrome, Firefox)\n      window.getSelection().removeAllRanges();\n      window.getSelection().addRange(document.createRange());\n    } else if (window.getSelection().empty) {\n      // Chrome supports this as well\n      window.getSelection().empty();\n    }\n  } else if (document.selection) {\n    // IE8-\n    document.selection.empty();\n  }\n};\n\nexport const getCaretCharacterOffsetWithin = (element) => {\n  var caretOffset = 0;\n  var doc = element.ownerDocument || element.document;\n  var win = doc.defaultView || doc.parentWindow;\n  var sel;\n  if (typeof win.getSelection !== 'undefined') {\n    sel = win.getSelection();\n    if (sel.rangeCount > 0) {\n      var range = win.getSelection().getRangeAt(0);\n      var selected = range.toString().length;\n      var preCaretRange = range.cloneRange();\n      preCaretRange.selectNodeContents(element);\n      preCaretRange.setEnd(range.endContainer, range.endOffset);\n      if (selected) {\n        caretOffset = preCaretRange.toString().length - selected;\n      } else {\n        caretOffset = preCaretRange.toString().length;\n      }\n    }\n  } else if ((sel = doc.selection) && sel.type !== 'Control') {\n    var textRange = sel.createRange();\n    var preCaretTextRange = doc.body.createTextRange();\n    preCaretTextRange.moveToElementText(element);\n    preCaretTextRange.setEndPoint('EndToEnd', textRange);\n    caretOffset = preCaretTextRange.text.length;\n  }\n  return caretOffset;\n};\n"],"file":"selection-utils.js"}

package/lib/tokenizer/token-text.js

@@ -0,0 +1,209 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Text = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _builder = require("./builder");
+
+var _yellow = _interopRequireDefault(require("@material-ui/core/colors/yellow"));
+
+var _green = _interopRequireDefault(require("@material-ui/core/colors/green"));
+
+var _debug = _interopRequireDefault(require("debug"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _selectionUtils = require("./selection-utils");
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var log = (0, _debug["default"])('@pie-lib:text-select:token-text');
+var Text = (0, _styles.withStyles)(function () {
+  return {
+    predefined: {
+      cursor: 'pointer',
+      backgroundColor: _yellow["default"][100],
+      border: "dashed 0px ".concat(_yellow["default"][700]),
+      // we need this for nested tokenized elements like paragraphs, where p is inside span
+      '& *': {
+        cursor: 'pointer',
+        backgroundColor: _yellow["default"][100],
+        border: "dashed 0px ".concat(_yellow["default"][700])
+      }
+    },
+    correct: {
+      backgroundColor: _green["default"][500],
+      '& *': {
+        backgroundColor: _green["default"][500]
+      }
+    }
+  };
+})(function (_ref) {
+  var text = _ref.text,
+      predefined = _ref.predefined,
+      classes = _ref.classes,
+      onClick = _ref.onClick,
+      correct = _ref.correct;
+  var formattedText = (text || '').replace(/\n/g, '<br>');
+
+  if (predefined) {
+    var className = (0, _classnames["default"])(classes.predefined, correct && classes.correct);
+    return /*#__PURE__*/_react["default"].createElement("span", {
+      onClick: onClick,
+      className: className,
+      dangerouslySetInnerHTML: {
+        __html: formattedText
+      }
+    });
+  } else {
+    return /*#__PURE__*/_react["default"].createElement("span", {
+      dangerouslySetInnerHTML: {
+        __html: formattedText
+      }
+    });
+  }
+});
+exports.Text = Text;
+var notAllowedCharacters = ['\n', ' ', '\t'];
+
+var TokenText = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(TokenText, _React$Component);
+
+  var _super = _createSuper(TokenText);
+
+  function TokenText() {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, TokenText);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onClick", function (event) {
+      var _this$props = _this.props,
+          onSelectToken = _this$props.onSelectToken,
+          text = _this$props.text,
+          tokens = _this$props.tokens;
+      event.preventDefault();
+
+      if (typeof window === 'undefined') {
+        return;
+      }
+
+      var selection = window.getSelection();
+      var textSelected = selection.toString();
+
+      if (textSelected.length > 0 && notAllowedCharacters.indexOf(textSelected) < 0) {
+        if (_this.root) {
+          var offset = (0, _selectionUtils.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
+           */
+
+          var newLineOffset = text.slice(offset).indexOf(textSelected);
+          offset += newLineOffset;
+
+          if (offset !== undefined) {
+            var endIndex = offset + textSelected.length;
+
+            if (endIndex <= text.length) {
+              var i = (0, _builder.intersection)({
+                start: offset,
+                end: endIndex
+              }, tokens);
+
+              if (i.hasOverlap) {
+                log('hasOverlap  - do nothing');
+                (0, _selectionUtils.clearSelection)();
+              } else {
+                var tokensToRemove = i.surroundedTokens;
+                var token = {
+                  text: textSelected,
+                  start: offset,
+                  end: endIndex
+                };
+                onSelectToken(token, tokensToRemove);
+                (0, _selectionUtils.clearSelection)();
+              }
+            }
+          }
+        }
+      }
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(TokenText, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props2 = this.props,
+          text = _this$props2.text,
+          tokens = _this$props2.tokens,
+          className = _this$props2.className,
+          onTokenClick = _this$props2.onTokenClick;
+      var normalized = (0, _builder.normalize)(text, tokens);
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: className,
+        ref: function ref(r) {
+          return _this2.root = r;
+        },
+        onClick: this.onClick
+      }, normalized.map(function (t, index) {
+        return /*#__PURE__*/_react["default"].createElement(Text, (0, _extends2["default"])({
+          key: index
+        }, t, {
+          onClick: function onClick() {
+            return onTokenClick(t);
+          }
+        }));
+      }));
+    }
+  }]);
+  return TokenText;
+}(_react["default"].Component);
+
+exports["default"] = TokenText;
+(0, _defineProperty2["default"])(TokenText, "propTypes", {
+  text: _propTypes["default"].string.isRequired,
+  tokens: _propTypes["default"].array.isRequired,
+  onTokenClick: _propTypes["default"].func.isRequired,
+  onSelectToken: _propTypes["default"].func.isRequired,
+  className: _propTypes["default"].string
+});
+//# sourceMappingURL=token-text.js.map