@pie-lib/text-select 1.12.8-next.1 → 1.14.0-beta.0

package/lib/tokenizer/token-text.js

@@ -51,10 +51,19 @@ var Text = (0, _styles.withStyles)(function () {
     predefined: {
       cursor: 'pointer',
       backgroundColor: _yellow["default"][100],
-      border: "dashed 0px ".concat(_yellow["default"][700])
+      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],
+      '& *': {
+        backgroundColor: _green["default"][500]
+      }
     }
   };
 })(function (_ref) {
@@ -197,4 +206,4 @@ exports["default"] = TokenText;
   onSelectToken: _propTypes["default"].func.isRequired,
   className: _propTypes["default"].string
 });
-//# sourceMappingURL=token-text.js.map
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy90b2tlbml6ZXIvdG9rZW4tdGV4dC5qc3giXSwibmFtZXMiOlsibG9nIiwiVGV4dCIsInByZWRlZmluZWQiLCJjdXJzb3IiLCJiYWNrZ3JvdW5kQ29sb3IiLCJ5ZWxsb3ciLCJib3JkZXIiLCJjb3JyZWN0IiwiZ3JlZW4iLCJ0ZXh0IiwiY2xhc3NlcyIsIm9uQ2xpY2siLCJmb3JtYXR0ZWRUZXh0IiwicmVwbGFjZSIsImNsYXNzTmFtZSIsIl9faHRtbCIsIm5vdEFsbG93ZWRDaGFyYWN0ZXJzIiwiVG9rZW5UZXh0IiwiZXZlbnQiLCJwcm9wcyIsIm9uU2VsZWN0VG9rZW4iLCJ0b2tlbnMiLCJwcmV2ZW50RGVmYXVsdCIsIndpbmRvdyIsInNlbGVjdGlvbiIsImdldFNlbGVjdGlvbiIsInRleHRTZWxlY3RlZCIsInRvU3RyaW5nIiwibGVuZ3RoIiwiaW5kZXhPZiIsInJvb3QiLCJvZmZzZXQiLCJuZXdMaW5lT2Zmc2V0Iiwic2xpY2UiLCJ1bmRlZmluZWQiLCJlbmRJbmRleCIsImkiLCJzdGFydCIsImVuZCIsImhhc092ZXJsYXAiLCJ0b2tlbnNUb1JlbW92ZSIsInN1cnJvdW5kZWRUb2tlbnMiLCJ0b2tlbiIsIm9uVG9rZW5DbGljayIsIm5vcm1hbGl6ZWQiLCJyIiwibWFwIiwidCIsImluZGV4IiwiUmVhY3QiLCJDb21wb25lbnQiLCJQcm9wVHlwZXMiLCJzdHJpbmciLCJpc1JlcXVpcmVkIiwiYXJyYXkiLCJmdW5jIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUE7O0FBQ0E7O0FBQ0E7O0FBQ0E7O0FBQ0E7O0FBQ0E7O0FBQ0E7O0FBQ0E7O0FBRUE7Ozs7OztBQUVBLElBQU1BLEdBQUcsR0FBRyx1QkFBTSxpQ0FBTixDQUFaO0FBRU8sSUFBTUMsSUFBSSxHQUFHLHdCQUFXO0FBQUEsU0FBTztBQUNwQ0MsSUFBQUEsVUFBVSxFQUFFO0FBQ1ZDLE1BQUFBLE1BQU0sRUFBRSxTQURFO0FBRVZDLE1BQUFBLGVB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RUE7QUFBWCxXQUFzQkQsQ0FBdEI7QUFBeUIsVUFBQSxPQUFPLEVBQUU7QUFBQSxtQkFBTUosWUFBWSxDQUFDSSxDQUFELENBQWxCO0FBQUE7QUFBbEMsV0FBUDtBQUNELE9BRkEsQ0FESCxDQURGO0FBT0Q7OztFQXRGb0NFLGtCQUFNQyxTOzs7aUNBQXhCakMsUyxlQUNBO0FBQ2pCUixFQUFBQSxJQUFJLEVBQUUwQyxzQkFBVUMsTUFBVixDQUFpQkMsVUFETjtBQUVqQmhDLEVBQUFBLE1BQU0sRUFBRThCLHNCQUFVRyxLQUFWLENBQWdCRCxVQUZQO0FBR2pCVixFQUFBQSxZQUFZLEVBQUVRLHNCQUFVSSxJQUFWLENBQWVGLFVBSFo7QUFJakJqQyxFQUFBQSxhQUFhLEVBQUUrQixzQkFBVUksSUFBVixDQUFlRixVQUpiO0FBS2pCdkMsRUFBQUEsU0FBUyxFQUFFcUMsc0JBQVVDO0FBTEosQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgd2l0aFN0eWxlcyB9IGZyb20gJ0BtYXRlcmlhbC11aS9jb3JlL3N0eWxlcyc7XG5pbXBvcnQgeyBub3JtYWxpemUsIGludGVyc2VjdGlvbiB9IGZyb20gJy4vYnVpbGRlcic7XG5pbXBvcnQgeWVsbG93IGZyb20gJ0BtYXRlcmlhbC11aS9jb3JlL2NvbG9ycy95ZWxsb3cnO1xuaW1wb3J0IGdyZWVuIGZyb20gJ0BtYXRlcmlhbC11aS9jb3JlL2NvbG9ycy9ncmVlbic7XG5pbXBvcnQgZGVidWcgZnJvbSAnZGVidWcnO1xuaW1wb3J0IGNsYXNzTmFtZXMgZnJvbSAnY2xhc3NuYW1lcyc7XG5cbmltcG9ydCB7IGNsZWFyU2VsZWN0aW9uLCBnZXRDYXJldENoYXJhY3Rlck9mZnNldFdpdGhpbiB9IGZyb20gJy4vc2VsZWN0aW9uLXV0aWxzJztcblxuY29uc3QgbG9nID0gZGVidWcoJ0BwaWUtbGliOnRleHQtc2VsZWN0OnRva2VuLXRleHQnKTtcblxuZXhwb3J0IGNvbnN0IFRleHQgPSB3aXRoU3R5bGVzKCgpID0+ICh7XG4gIHByZWRlZmluZWQ6IHtcbiAgICBjdXJzb3I6ICdwb2ludGVyJyxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHllbGxvd1sxMDBdLFxuICAgIGJvcmRlcjogYGRhc2hlZCAwcHggJHt5ZWxsb3dbNzAwXX1gLFxuICAgIC8vIHdlIG5lZWQgdGhpcyBmb3IgbmVzdGVkIHRva2VuaXplZCBlbGVtZW50cyBsaWtlIHBhcmFncmFwaHMsIHdoZXJlIHAgaXMgaW5zaWRlIHNwYW5cbiAgICAnJiAqJzoge1xuICAgICAgY3Vyc29yOiAncG9pbnRlcicsXG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IHllbGxvd1sxMDBdLFxuICAgICAgYm9yZGVyOiBgZGFzaGVkIDBweCAke3llbGxvd1s3MDBdfWAsXG4gICAgfSxcbiAgfSxcbiAgY29ycmVjdDoge1xuICAgIGJhY2tncm91bmRDb2xvcjogZ3JlZW5bNTAwXSxcbiAgICAnJiAqJzoge1xuICAgICAgYmFja2dyb3VuZENvbG9yOiBncmVlbls1MDBdLFxuICAgIH0sXG4gIH0sXG59KSkoKHsgdGV4dCwgcHJlZGVmaW5lZCwgY2xhc3Nlcywgb25DbGljaywgY29ycmVjdCB9KSA9PiB7XG4gIGNvbnN0IGZvcm1hdHRlZFRleHQgPSAodGV4dCB8fCAnJykucmVwbGFjZSgvXFxuL2csICc8YnI+Jyk7XG5cbiAgaWYgKHByZWRlZmluZWQpIHtcbiAgICBjb25zdCBjbGFzc05hbWUgPSBjbGFzc05hbWVzKGNsYXNzZXMucHJlZGVmaW5lZCwgY29ycmVjdCAmJiBjbGFzc2VzLmNvcnJlY3QpO1xuXG4gICAgcmV0dXJuIDxzcGFuIG9uQ2xpY2s9e29uQ2xpY2t9IGNsYXNzTmFtZT17Y2xhc3NOYW1lfSBkYW5nZXJvdXNseVNldElubmVySFRNTD17eyBfX2h0bWw6IGZvcm1hdHRlZFRleHQgfX0gLz47XG4gIH0gZWxzZSB7XG4gICAgcmV0dXJuIDxzcGFuIGRhbmdlcm91c2x5U2V0SW5uZXJIVE1MPXt7IF9faHRtbDogZm9ybWF0dGVkVGV4dCB9fSAvPjtcbiAgfVxufSk7XG5cbmNvbnN0IG5vdEFsbG93ZWRDaGFyYWN0ZXJzID0gWydcXG4nLCAnICcsICdcXHQnXTtcblxuZXhwb3J0IGRlZmF1bHQgY2xhc3MgVG9rZW5UZXh0IGV4dGVuZHMgUmVhY3QuQ29tcG9uZW50IHtcbiAgc3RhdGljIHByb3BUeXBlcyA9IHtcbiAgICB0ZXh0OiBQcm9wVHlwZXMuc3RyaW5nLmlzUmVxdWlyZWQsXG4gICAgdG9rZW5zOiBQcm9wVHlwZXMuYXJyYXkuaXNSZXF1aXJlZCxcbiAgICBvblRva2VuQ2xpY2s6IFByb3BUeXBlcy5mdW5jLmlzUmVxdWlyZWQsXG4gICAgb25TZWxlY3RUb2tlbjogUHJvcFR5cGVzLmZ1bmMuaXNSZXF1aXJlZCxcbiAgICBjbGFzc05hbWU6IFByb3BUeXBlcy5zdHJpbmcsXG4gIH07XG5cbiAgLypcbiAgIENoYW5nZSB0aGlzIHRvIG9uQ2xpY2sgaW5zdGVhZCBvZiBtb3VzZVVwIGJlY2F1c2UgcHJldmlvdXNseSwgaW4gc29tZSBjYXNlc1xuICAgdGhlIG9uQ2xpY2sgZXZlbnQgZnJvbSB0aGUgPFRleHQgLz4gY29tcG9uZW50IHdhcyBjYWxsZWQgcmlnaHQgYWZ0ZXIgdGhlIHVzZXJcbiAgIHNlbGVjdGVkIHRva2VuIGFuZCB0aGF0IHRva2VuIHdhcyB0aGVuIHJlbW92ZWQgYmVjYXVzZSB0aGUgc2V0Q29ycmVjdE1vZGUgd2FzIG5vdCB0cnVlLlxuXG4gICBjb25zdCB7IHNldENvcnJlY3RNb2RlIH0gPSB0aGlzLnN0YXRlO1xuXG4gICBpZiAoc2V0Q29ycmVjdE1vZGUpIHtcbiAgIHRoaXMuc2V0Q29ycmVjdCh0b2tlbik7XG4gICB9IGVsc2Uge1xuICAgdGhpcy5yZW1vdmVUb2tlbih0b2tlbik7XG4gICB9XG4gICAqL1xuICBvbkNsaWNrID0gKGV2ZW50KSA9PiB7XG4gICAgY29uc3QgeyBvblNlbGVjdFRva2VuLCB0ZXh0LCB0b2tlbnMgfSA9IHRoaXMucHJvcHM7XG5cbiAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuXG4gICAgaWYgKHR5cGVvZiB3aW5kb3cgPT09ICd1bmRlZmluZWQnKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgY29uc3Qgc2VsZWN0aW9uID0gd2luZG93LmdldFNlbGVjdGlvbigpO1xuICAgIGNvbnN0IHRleHRTZWxlY3RlZCA9IHNlbGVjdGlvbi50b1N0cmluZygpO1xuXG4gICAgaWYgKHRleHRTZWxlY3RlZC5sZW5ndGggPiAwICYmIG5vdEFsbG93ZWRDaGFyYWN0ZXJzLmluZGV4T2YodGV4dFNlbGVjdGVkKSA8IDApIHtcbiAgICAgIGlmICh0aGlzLnJvb3QpIHtcbiAgICAgICAgbGV0IG9mZnNldCA9IGdldENhcmV0Q2hhcmFjdGVyT2Zmc2V0V2l0aGluKHRoaXMucm9vdCk7XG4gICAgICAgIC8qXG4gICAgICAgICBTaW5jZSB3ZSBpbXBsZW1lbnRlZCBuZXcgbGluZSBmdW5jdGlvbmFsaXR5IChcXG4pIHVzaW5nIDxiciAvPiBkb20gZWxlbWVudHNcbiAgICAgICAgIGFuZCB3aW5kb3cuZ2V0U2VsZWN0aW9uIGlzIG5vdCB0YWtpbmcgdGhhdCBpbnRvIGNvbnNpZGVyYXRpb24sIHRoZSBvZmZzZXQgbWlnaHRcbiAgICAgICAgIGJlIG9mZiBieSBhIGZldyBjaGFyYWN0ZXJzLlxuXG4gICAgICAgICBUbyBjb21iYXQgdGhhdCwgd2UgY2hlY2sgaWYgdGhlIHNlbGVjdGVkIHRleHQgaXMgcmlnaHQgYXQgdGhlIGJlZ2lubmluZyBvZiB0aGUgb2Zmc2V0LlxuXG4gICAgICAgICBJZiBpdCdzIG5vdCwgd2UgYWRkIHRoZSBhZGRpdGlvbmFsIG9mZnNldCBpbiBvcmRlciBmb3IgdGhhdCB0byBiZSBhY2N1cmF0ZVxuICAgICAgICAgKi9cbiAgICAgICAgY29uc3QgbmV3TGluZU9mZnNldCA9IHRleHQuc2xpY2Uob2Zmc2V0KS5pbmRleE9mKHRleHRTZWxlY3RlZCk7XG5cbiAgICAgICAgb2Zmc2V0ICs9IG5ld0xpbmVPZmZzZXQ7XG5cbiAgICAgICAgaWYgKG9mZnNldCAhPT0gdW5kZWZpbmVkKSB7XG4gICAgICAgICAgY29uc3QgZW5kSW5kZXggPSBvZmZzZXQgKyB0ZXh0U2VsZWN0ZWQubGVuZ3RoO1xuXG4gICAgICAgICAgaWYgKGVuZEluZGV4IDw9IHRleHQubGVuZ3RoKSB7XG4gICAgICAgICAgICBjb25zdCBpID0gaW50ZXJzZWN0aW9uKHsgc3RhcnQ6IG9mZnNldCwgZW5kOiBlbmRJbmRleCB9LCB0b2tlbnMpO1xuICAgICAgICAgICAgaWYgKGkuaGFzT3ZlcmxhcCkge1xuICAgICAgICAgICAgICBsb2coJ2hhc092ZXJsYXAgIC0gZG8gbm90aGluZycpO1xuICAgICAgICAgICAgICBjbGVhclNlbGVjdGlvbigpO1xuICAgICAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgICAgY29uc3QgdG9rZW5zVG9SZW1vdmUgPSBpLnN1cnJvdW5kZWRUb2tlbnM7XG4gICAgICAgICAgICAgIGNvbnN0IHRva2VuID0ge1xuICAgICAgICAgICAgICAgIHRleHQ6IHRleHRTZWxlY3RlZCxcbiAgICAgICAgICAgICAgICBzdGFydDogb2Zmc2V0LFxuICAgICAgICAgICAgICAgIGVuZDogZW5kSW5kZXgsXG4gICAgICAgICAgICAgIH07XG5cbiAgICAgICAgICAgICAgb25TZWxlY3RUb2tlbih0b2tlbiwgdG9rZW5zVG9SZW1vdmUpO1xuICAgICAgICAgICAgICBjbGVhclNlbGVjdGlvbigpO1xuICAgICAgICAgICAgfVxuICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgICAgfVxuICAgIH1cbiAgfTtcblxuICByZW5kZXIoKSB7XG4gICAgY29uc3QgeyB0ZXh0LCB0b2tlbnMsIGNsYXNzTmFtZSwgb25Ub2tlbkNsaWNrIH0gPSB0aGlzLnByb3BzO1xuICAgIGNvbnN0IG5vcm1hbGl6ZWQgPSBub3JtYWxpemUodGV4dCwgdG9rZW5zKTtcblxuICAgIHJldHVybiAoXG4gICAgICA8ZGl2IGNsYXNzTmFtZT17Y2xhc3NOYW1lfSByZWY9eyhyKSA9PiAodGhpcy5yb290ID0gcil9IG9uQ2xpY2s9e3RoaXMub25DbGlja30+XG4gICAgICAgIHtub3JtYWxpemVkLm1hcCgodCwgaW5kZXgpID0+IHtcbiAgICAgICAgICByZXR1cm4gPFRleHQga2V5PXtpbmRleH0gey4uLnR9IG9uQ2xpY2s9eygpID0+IG9uVG9rZW5DbGljayh0KX0gLz47XG4gICAgICAgIH0pfVxuICAgICAgPC9kaXY+XG4gICAgKTtcbiAgfVxufVxuIl19

package/lib/utils.js

@@ -64,4 +64,4 @@ var prepareText = function prepareText(text) {
 };
 
 exports.prepareText = prepareText;
-//# sourceMappingURL=utils.js.map
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy91dGlscy5qcyJdLCJuYW1lcyI6WyJjcmVhdGVFbGVtZW50RnJvbUhUTUwiLCJodG1sU3RyaW5nIiwiZGl2IiwiZG9jdW1lbnQiLCJjcmVhdGVFbGVtZW50IiwiaW5uZXJIVE1MIiwidHJpbSIsInBhcnNlQnJzIiwiZG9tIiwiYnJzIiwicXVlcnlTZWxlY3RvckFsbCIsImZvckVhY2giLCJiciIsInJlcGxhY2VXaXRoIiwicmVwbGFjZSIsInBhcnNlUGFyYWdyYXBoIiwicGFyYWdyYXBoIiwiZW5kIiwicGFyc2VQYXJhZ3JhcGhzIiwicGFyYWdyYXBocyIsInN0ciIsInBhciIsImluZGV4IiwibGVuZ3RoIiwicHJlcGFyZVRleHQiLCJ0ZXh0IiwidHh0RG9tIiwiYWxsRG9tRWxlbWVudHMiLCJBcnJheSIsImZyb20iXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBQSxJQUFNQSxxQkFBcUIsR0FBRyxTQUF4QkEscUJBQXdCLEdBQXFCO0FBQUEsTUFBcEJDLFVBQW9CLHVFQUFQLEVBQU87QUFDakQsTUFBTUMsR0FBRyxHQUFHQyxRQUFRLENBQUNDLGFBQVQsQ0FBdUIsS0FBdkIsQ0FBWjtBQUVBRixFQUFBQSxHQUFHLENBQUNHLFNBQUosR0FBZ0JKLFVBQVUsQ0FBQ0ssSUFBWCxFQUFoQjtBQUVBLFNBQU9KLEdBQVA7QUFDRCxDQU5EOztBQVFPLElBQU1LLFFBQVEsR0FBRyxTQUFYQSxRQUFXLENBQUNDLEdBQUQsRUFBUztBQUMvQixNQUFNQyxHQUFHLEdBQUdELEdBQUcsQ0FBQ0UsZ0JBQUosQ0FBcUIsSUFBckIsQ0FBWjtBQUVBRCxFQUFBQSxHQUFHLENBQUNFLE9BQUosQ0FBWSxVQUFDQyxFQUFEO0FBQUEsV0FBUUEsRUFBRSxDQUFDQyxXQUFILENBQWUsSUFBZixDQUFSO0FBQUEsR0FBWjtBQUVBTCxFQUFBQSxHQUFHLENBQUNILFNBQUosR0FBZ0JHLEdBQUcsQ0FBQ0gsU0FBSixDQUFjUyxPQUFkLENBQXNCLE9BQXRCLEVBQStCLElBQS9CLENBQWhCO0FBQ0QsQ0FOTTs7OztBQVFBLElBQU1DLGNBQWMsR0FBRyxTQUFqQkEsY0FBaUIsQ0FBQ0MsU0FBRCxFQUFZQyxHQUFaLEVBQW9CO0FBQ2hELE1BQUlBLEdBQUosRUFBUztBQUNQLFdBQU9ELFNBQVMsQ0FBQ1gsU0FBakI7QUFDRDs7QUFFRCxtQkFBVVcsU0FBUyxDQUFDWCxTQUFwQjtBQUNELENBTk07Ozs7QUFRQSxJQUFNYSxlQUFlLEdBQUcsU0FBbEJBLGVBQWtCLENBQUNWLEdBQUQsRUFBUztBQUN0QyxNQUFNVyxVQUFVLEdBQUdYLEdBQUcsQ0FBQ0UsZ0JBQUosQ0FBcUIsR0FBckIsQ0FBbkIsQ0FEc0MsQ0FFdEM7O0FBQ0EsTUFBSVUsR0FBRyxHQUFHLEVBQVY7QUFFQUQsRUFBQUEsVUFBVSxDQUFDUixPQUFYLENBQW1CLFVBQUNVLEdBQUQsRUFBTUMsS0FBTixFQUFnQjtBQUNqQ0YsSUFBQUEsR0FBRyxJQUFJTCxjQUFjLENBQUNNLEdBQUQsRUFBTUMsS0FBSyxLQUFLSCxVQUFVLENBQUNJLE1BQVgsR0FBb0IsQ0FBcEMsQ0FBckI7QUFDRCxHQUZEO0FBSUEsU0FBT0gsR0FBRyxJQUFJLElBQWQ7QUFDRCxDQVZNOzs7O0FBWUEsSUFBTUksV0FBVyxHQUFHLFNBQWRBLFdBQWMsQ0FBQ0MsSUFBRCxFQUFVO0FBQ25DLE1BQUlDLE1BQU0sR0FBRzFCLHFCQUFxQixDQUFDeUIsSUFBRCxDQUFsQztBQUNBLE1BQU1FLGNBQWMsR0FBR0MsS0FBSyxDQUFDQyxJQUFOLENBQVdILE1BQU0sQ0FBQ2hCLGdCQUFQLENBQXdCLEdBQXhCLENBQVgsQ0FBdkI7O0FBRUEsTUFBSWdCLE1BQU0sQ0FBQ2hCLGdCQUFQLENBQXdCLEdBQXhCLEVBQTZCYSxNQUE3QixLQUF3QyxDQUE1QyxFQUErQztBQUM3QyxRQUFNckIsR0FBRyxHQUFHQyxRQUFRLENBQUNDLGFBQVQsQ0FBdUIsS0FBdkIsQ0FBWjtBQUVBRixJQUFBQSxHQUFHLENBQUNHLFNBQUosZ0JBQXNCcUIsTUFBTSxDQUFDckIsU0FBN0I7QUFDQXFCLElBQUFBLE1BQU0sR0FBR3hCLEdBQVQ7QUFDRCxHQVRrQyxDQVduQzs7O0FBQ0EsTUFBSXlCLGNBQWMsQ0FBQ0osTUFBZixLQUEwQixDQUE5QixFQUFpQztBQUMvQixXQUFPRSxJQUFQO0FBQ0Q7O0FBRURsQixFQUFBQSxRQUFRLENBQUNtQixNQUFELENBQVI7QUFFQSxTQUFPUixlQUFlLENBQUNRLE1BQUQsQ0FBdEI7QUFDRCxDQW5CTSIsInNvdXJjZXNDb250ZW50IjpbImNvbnN0IGNyZWF0ZUVsZW1lbnRGcm9tSFRNTCA9IChodG1sU3RyaW5nID0gJycpID0+IHtcbiAgY29uc3QgZGl2ID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnZGl2Jyk7XG5cbiAgZGl2LmlubmVySFRNTCA9IGh0bWxTdHJpbmcudHJpbSgpO1xuXG4gIHJldHVybiBkaXY7XG59O1xuXG5leHBvcnQgY29uc3QgcGFyc2VCcnMgPSAoZG9tKSA9PiB7XG4gIGNvbnN0IGJycyA9IGRvbS5xdWVyeVNlbGVjdG9yQWxsKCdicicpO1xuXG4gIGJycy5mb3JFYWNoKChicikgPT4gYnIucmVwbGFjZVdpdGgoJ1xcbicpKTtcblxuICBkb20uaW5uZXJIVE1MID0gZG9tLmlubmVySFRNTC5yZXBsYWNlKC9cXG5cXG4vZywgJ1xcbicpO1xufTtcblxuZXhwb3J0IGNvbnN0IHBhcnNlUGFyYWdyYXBoID0gKHBhcmFncmFwaCwgZW5kKSA9PiB7XG4gIGlmIChlbmQpIHtcbiAgICByZXR1cm4gcGFyYWdyYXBoLmlubmVySFRNTDtcbiAgfVxuXG4gIHJldHVybiBgJHtwYXJhZ3JhcGguaW5uZXJIVE1MfVxcblxcbmA7XG59O1xuXG5leHBvcnQgY29uc3QgcGFyc2VQYXJhZ3JhcGhzID0gKGRvbSkgPT4ge1xuICBjb25zdCBwYXJhZ3JhcGhzID0gZG9tLnF1ZXJ5U2VsZWN0b3JBbGwoJ3AnKTtcbiAgLy8gc2VwYXJhdGUgdmFyaWFibGUgZm9yIGVhc2lseSBkZWJ1Z2dpbmcsIGlmIG5lZWRlZFxuICBsZXQgc3RyID0gJyc7XG5cbiAgcGFyYWdyYXBocy5mb3JFYWNoKChwYXIsIGluZGV4KSA9PiB7XG4gICAgc3RyICs9IHBhcnNlUGFyYWdyYXBoKHBhciwgaW5kZXggPT09IHBhcmFncmFwaHMubGVuZ3RoIC0gMSk7XG4gIH0pO1xuXG4gIHJldHVybiBzdHIgfHwgbnVsbDtcbn07XG5cbmV4cG9ydCBjb25zdCBwcmVwYXJlVGV4dCA9ICh0ZXh0KSA9PiB7XG4gIGxldCB0eHREb20gPSBjcmVhdGVFbGVtZW50RnJvbUhUTUwodGV4dCk7XG4gIGNvbnN0IGFsbERvbUVsZW1lbnRzID0gQXJyYXkuZnJvbSh0eHREb20ucXVlcnlTZWxlY3RvckFsbCgnKicpKTtcblxuICBpZiAodHh0RG9tLnF1ZXJ5U2VsZWN0b3JBbGwoJ3AnKS5sZW5ndGggPT09IDApIHtcbiAgICBjb25zdCBkaXYgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdkaXYnKTtcblxuICAgIGRpdi5pbm5lckhUTUwgPSBgPHA+JHt0eHREb20uaW5uZXJIVE1MfTwvcD5gO1xuICAgIHR4dERvbSA9IGRpdjtcbiAgfVxuXG4gIC8vIGlmIG5vIGRvbSBlbGVtZW50cywgd2UganVzdCByZXR1cm4gdGhlIHRleHRcbiAgaWYgKGFsbERvbUVsZW1lbnRzLmxlbmd0aCA9PT0gMCkge1xuICAgIHJldHVybiB0ZXh0O1xuICB9XG5cbiAgcGFyc2VCcnModHh0RG9tKTtcblxuICByZXR1cm4gcGFyc2VQYXJhZ3JhcGhzKHR4dERvbSk7XG59O1xuIl19

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.12.8-next.1+23991a09",
+  "version": "1.14.0-beta.0",
   "description": "Some react components for text selection",
   "keywords": [
     "react",
@@ -18,9 +18,9 @@
   "license": "ISC",
   "dependencies": {
     "@pie-framework/parse-english": "^1.0.0",
-    "@pie-lib/render-ui": "^4.15.10-next.1+23991a09",
-    "@pie-lib/style-utils": "^0.1.43",
-    "@pie-lib/translator": "^2.3.0",
+    "@pie-lib/render-ui": "^4.17.0-beta.0",
+    "@pie-lib/style-utils": "^0.3.0-beta.0",
+    "@pie-lib/translator": "^2.5.0-beta.0",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
     "invariant": "^2.2.4",
@@ -30,7 +30,8 @@
   },
   "devDependencies": {
     "@material-ui/core": "^3.8.3",
-    "@pie-lib/test-utils": "^0.2.33",
+    "@pie-framework/parse-english": "^1.0.0",
+    "@pie-lib/test-utils": "^0.4.0-beta.0",
     "natural": "^0.6.3",
     "react": "^16.8.1",
     "react-dom": "^16.9.0"
@@ -39,6 +40,6 @@
     "@material-ui/core": "^3.8.3",
     "react": "^16.8.1"
   },
-  "gitHead": "23991a09b77492c24dcb5235049667cdcc211d80",
+  "gitHead": "3818c24530f62b5bb9be7a2c6aa5428f13a17e0a",
   "scripts": {}
 }

package/src/__tests__/__snapshots__/text-select.test.jsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`text-select snapshot renders 1`] = `
+<WithStyles(TokenSelect)
+  maxNoOfSelections={4}
+  onChange={[Function]}
+  tokens={
+    Array [
+      Object {
+        "correct": undefined,
+        "end": 3,
+        "isMissing": undefined,
+        "selectable": undefined,
+        "selected": false,
+        "start": 0,
+        "text": "foo",
+      },
+    ]
+  }
+/>
+`;

package/src/__tests__/text-select.test.jsx

@@ -0,0 +1,34 @@
+import TextSelect from '../text-select';
+import { shallow } from 'enzyme';
+import React from 'react';
+import toJson from 'enzyme-to-json';
+describe('text-select', () => {
+  describe('snapshot', () => {
+    it('renders', () => {
+      const w = shallow(
+        <TextSelect text="foo" tokens={[]} selectedTokens={[]} onChange={jest.fn()} maxNoOfSelections={4} />,
+      );
+      expect(w).toMatchSnapshot();
+    });
+  });
+
+  describe('logic', () => {
+    let w, onChange;
+    beforeEach(() => {
+      onChange = jest.fn();
+      w = shallow(<TextSelect text="foo" tokens={[]} selectedTokens={[]} onChange={onChange} />);
+    });
+
+    describe('change', () => {
+      it('calls onChange', () => {
+        const changeArgs = [
+          { start: 0, end: 1, selected: true },
+          { start: 1, end: 2 },
+        ];
+
+        w.instance().change(changeArgs);
+        expect(onChange).toBeCalledWith([{ start: 0, end: 1 }]);
+      });
+    });
+  });
+});

package/src/__tests__/utils.test.jsx

@@ -0,0 +1,27 @@
+import { prepareText } from '../utils';
+
+describe('logic', () => {
+  it('returns text if no html elements', () => {
+    const formattedText = prepareText(`foo bar`);
+
+    expect(formattedText).toEqual('foo bar');
+  });
+
+  it('replaces br with new lines', () => {
+    const formattedText = prepareText(`<p>foo<br>bar</p>`);
+
+    expect(formattedText).toEqual('foo\nbar');
+  });
+
+  it('replaces p with 2 new lines', () => {
+    const formattedText = prepareText(`<p>foo<br>bar</p><p>bar<br>foo</p>`);
+
+    expect(formattedText).toEqual('foo\nbar\n\nbar\nfoo');
+  });
+
+  it('adds p if there are no paragraphs', () => {
+    const formattedText = prepareText(`foo<br>bar<br>foo`);
+
+    expect(formattedText).toEqual('foo\nbar\nfoo');
+  });
+});

package/src/index.js

@@ -1,3 +1,4 @@
+import Controls from './tokenizer/controls';
 import Tokenizer from './tokenizer';
 import TokenSelect, { TokenTypes } from './token-select';
 import TextSelect from './text-select';
@@ -5,4 +6,4 @@ import { Legend } from './legend';
 import Token from './token-select/token';
 import { prepareText } from './utils';
 
-export { TextSelect, TokenTypes, Tokenizer, TokenSelect, Token, prepareText, Legend };
+export { Controls, TextSelect, TokenTypes, Tokenizer, TokenSelect, Token, prepareText, Legend };

package/src/token-select/__tests__/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`token-select snapshot renders 1`] = `
+<div
+  className=""
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<p><span class=\\"tokenRootClass Token-token-1 Token-selectable-5\\" data-indexkey=\\"0\\" data-reactroot=\\"\\">foo bar</span></p>",
+    }
+  }
+  onClick={[Function]}
+/>
+`;
+
+exports[`token-select snapshot renders in view mode with selected tokens 1`] = `
+<div
+  className=""
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<p><span class=\\"Token-token-1 Token-selected-6 Token-disabledBlack-3\\" data-indexkey=\\"0\\" data-reactroot=\\"\\">foo,</span><br><span class=\\"Token-token-1 Token-selected-6 Token-disabledBlack-3\\" data-indexkey=\\"2\\" data-reactroot=\\"\\">bar</span></p>",
+    }
+  }
+  onClick={[Function]}
+/>
+`;
+
+exports[`token-select snapshot renders paragraphs properly 1`] = `
+<div
+  className=""
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<p><span class=\\"tokenRootClass Token-token-1 Token-selectable-5\\" data-indexkey=\\"0\\" data-reactroot=\\"\\">foo,</span></p><p><span class=\\"tokenRootClass Token-token-1 Token-selectable-5\\" data-indexkey=\\"2\\" data-reactroot=\\"\\">bar</span></p>",
+    }
+  }
+  onClick={[Function]}
+/>
+`;
+
+exports[`token-select snapshot renders sentences properly 1`] = `
+<div
+  className=""
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<p><span class=\\"tokenRootClass Token-token-1 Token-selectable-5\\" data-indexkey=\\"0\\" data-reactroot=\\"\\">foo,</span><br><span class=\\"tokenRootClass Token-token-1 Token-selectable-5\\" data-indexkey=\\"2\\" data-reactroot=\\"\\">bar</span></p>",
+    }
+  }
+  onClick={[Function]}
+/>
+`;

package/src/token-select/__tests__/__snapshots__/token.test.jsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`token snapshot renders 1`] = `
+<Wrapper
+  useWrapper={false}
+>
+  <span
+    className="tokenRootClass token"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "foo bar",
+      }
+    }
+  />
+</Wrapper>
+`;
+
+exports[`token snapshot renders with brs 1`] = `
+<Wrapper
+  useWrapper={false}
+>
+  <span
+    className="tokenRootClass token"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "foo <br>bar",
+      }
+    }
+  />
+</Wrapper>
+`;

package/src/token-select/__tests__/index.test.jsx

@@ -0,0 +1,257 @@
+import { TokenSelect } from '../index';
+import React from 'react';
+import { shallow } from 'enzyme';
+
+describe('token-select', () => {
+  describe('snapshot', () => {
+    it('renders', () => {
+      const w = shallow(
+        <TokenSelect
+          tokens={[
+            {
+              text: 'foo bar',
+              start: 0,
+              end: 7,
+              predefined: true,
+              selectable: true,
+              selected: false,
+            },
+          ]}
+          classes={{}}
+          onChange={jest.fn()}
+        />,
+      );
+      expect(w).toMatchSnapshot();
+    });
+
+    it('renders sentences properly', () => {
+      const w = shallow(
+        <TokenSelect
+          tokens={[
+            {
+              text: 'foo,',
+              start: 0,
+              end: 4,
+              predefined: true,
+              selectable: true,
+              selected: false,
+            },
+            {
+              text: '\n',
+              start: 4,
+              end: 5,
+              selected: false,
+            },
+            {
+              text: 'bar',
+              start: 5,
+              end: 8,
+              predefined: true,
+              selectable: true,
+              selected: false,
+            },
+          ]}
+          classes={{}}
+          onChange={jest.fn()}
+        />,
+      );
+      expect(w).toMatchSnapshot();
+    });
+
+    it('renders paragraphs properly', () => {
+      const w = shallow(
+        <TokenSelect
+          tokens={[
+            {
+              text: 'foo,',
+              start: 0,
+              end: 4,
+              predefined: true,
+              selectable: true,
+              selected: false,
+            },
+            {
+              text: '\n\n',
+              start: 4,
+              end: 5,
+              selected: false,
+            },
+            {
+              text: 'bar',
+              start: 5,
+              end: 8,
+              predefined: true,
+              selectable: true,
+              selected: false,
+            },
+          ]}
+          classes={{}}
+          onChange={jest.fn()}
+        />,
+      );
+      expect(w).toMatchSnapshot();
+    });
+
+    it('renders in view mode with selected tokens', () => {
+      const w = shallow(
+        <TokenSelect
+          disabled
+          tokens={[
+            {
+              text: 'foo,',
+              start: 0,
+              end: 4,
+              predefined: true,
+              selectable: true,
+              selected: true,
+            },
+            {
+              text: '\n',
+              start: 4,
+              end: 5,
+              selected: false,
+            },
+            {
+              text: 'bar',
+              start: 5,
+              end: 8,
+              predefined: true,
+              selectable: true,
+              selected: true,
+            },
+          ]}
+          classes={{}}
+          onChange={jest.fn()}
+        />,
+      );
+      expect(w).toMatchSnapshot();
+    });
+  });
+
+  describe('logic', () => {
+    let w, onChange;
+    beforeEach(() => {
+      onChange = jest.fn();
+      w = shallow(
+        <TokenSelect
+          tokens={[
+            {
+              text: 'foo',
+              start: 0,
+              end: 3,
+            },
+            {
+              text: 'bar',
+              start: 4,
+              end: 7,
+            },
+          ]}
+          classes={{}}
+          onChange={onChange}
+        />,
+      );
+    });
+    describe('selectedCount', () => {
+      it('returns the correct count', () => {
+        expect(w.instance().selectedCount()).toEqual(0);
+      });
+
+      it('returns the correct count for 1 selected', () => {
+        w.setProps({ tokens: [{ selected: true }] });
+        expect(w.instance().selectedCount()).toEqual(1);
+      });
+    });
+
+    describe('canSelectMore', () => {
+      it('returns true for undefined max selections', () => {
+        w.setProps({ maxNoOfSelections: undefined });
+        expect(w.instance().canSelectMore(10)).toEqual(true);
+      });
+      it('returns true for 0 max selections', () => {
+        w.setProps({ maxNoOfSelections: 0 });
+        expect(w.instance().canSelectMore(10)).toEqual(true);
+      });
+      it('returns true for -1 max selections', () => {
+        w.setProps({ maxNoOfSelections: -1 });
+        expect(w.instance().canSelectMore(10)).toEqual(true);
+      });
+      it('returns true for 5 max selections and count 4', () => {
+        w.setProps({ maxNoOfSelections: 5 });
+        expect(w.instance().canSelectMore(4)).toEqual(true);
+      });
+
+      it('returns true for 5 max selections and count 5', () => {
+        w.setProps({ maxNoOfSelections: 5 });
+        expect(w.instance().canSelectMore(5)).toEqual(false);
+      });
+
+      it('returns false for 5 max selections and count 6', () => {
+        w.setProps({ maxNoOfSelections: 5 });
+        expect(w.instance().canSelectMore(6)).toEqual(false);
+      });
+
+      it('returns true for 1 max selections and count 1', () => {
+        w.setProps({ maxNoOfSelections: 1 });
+        expect(w.instance().canSelectMore(1)).toEqual(true);
+      });
+    });
+
+    describe('toggleToken', () => {
+      it('return if clicked target is not selectable', () => {
+        w.setProps({ maxNoOfSelections: 1, tokens: [{ selected: true }] });
+
+        const closest = jest.fn().mockReturnValue(null);
+        const mockedEvent = { target: { closest } };
+
+        w.instance().toggleToken(mockedEvent);
+
+        expect(onChange).not.toBeCalled();
+      });
+
+      it('calls onChange', () => {
+        w.setProps({ maxNoOfSelections: 0, tokens: [{ selected: true }] });
+
+        const closest = jest.fn().mockReturnValue({
+          dataset: {
+            indexkey: '0',
+          },
+        });
+        const mockedEvent = { target: { closest } };
+
+        w.instance().toggleToken(mockedEvent);
+
+        expect(onChange).toBeCalled();
+      });
+
+      it('returns if max tokens have been selected', () => {
+        w.setProps({ maxNoOfSelections: 0, tokens: [{ selected: true }] });
+
+        const closest = jest.fn().mockReturnValue({
+          dataset: {
+            indexkey: '0',
+          },
+        });
+        const mockedEvent = { target: { closest } };
+
+        w.instance().toggleToken(mockedEvent);
+
+        expect(onChange).not.toBeCalledWith([{ selected: true }]);
+      });
+
+      it('calls onChange if maxNoOfSelections is 1 and selectedCount is 1', () => {
+        w.setProps({ maxNoOfSelections: 1, tokens: [{ selected: true }] });
+
+        const closest = jest.fn().mockReturnValue({
+          dataset: {
+            indexkey: '0',
+          },
+        });
+        const mockedEvent = { target: { closest } };
+
+        w.instance().toggleToken(mockedEvent);
+
+        expect(onChange).toBeCalled();
+      });
+    });
+  });
+});

package/src/token-select/__tests__/token.test.jsx

@@ -0,0 +1,33 @@
+import { Token } from '../token';
+import { shallow } from 'enzyme';
+import React from 'react';
+
+describe('token', () => {
+  describe('snapshot', () => {
+    it('renders', () => {
+      const w = shallow(
+        <Token
+          classes={{
+            token: 'token',
+            selectable: 'selectable',
+          }}
+          text={'foo bar'}
+        />,
+      );
+      expect(w).toMatchSnapshot();
+    });
+
+    it('renders with brs', () => {
+      const w = shallow(
+        <Token
+          classes={{
+            token: 'token',
+            selectable: 'selectable',
+          }}
+          text={'foo \nbar'}
+        />,
+      );
+      expect(w).toMatchSnapshot();
+    });
+  });
+});

package/src/token-select/index.jsx

@@ -58,7 +58,9 @@ export class TokenSelect extends React.Component {
     const targetedTokenIndex = targetSpanWrapper && targetSpanWrapper.dataset && targetSpanWrapper.dataset.indexkey;
     const t = targetedTokenIndex && tokensCloned[targetedTokenIndex];
 
-    if (t && t.correct === undefined && !animationsDisabled) {
+    // 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;
 

package/src/token-select/token.jsx

@@ -115,10 +115,6 @@ export default withStyles((theme) => {
     token: {
       cursor: 'pointer',
       textIndent: 0,
-      padding: theme.spacing.unit / 2,
-      paddingRight: 0,
-      paddingLeft: 0,
-      transition: 'background-color 100ms ease-in',
     },
     disabled: {
       cursor: 'inherit',
@@ -134,6 +130,7 @@ export default withStyles((theme) => {
       [theme.breakpoints.up(769)]: {
         '&:hover': {
           backgroundColor: color.primaryLight(),
+          color: theme.palette.common.black,
           '& > *': {
             backgroundColor: color.primaryLight(),
           },
@@ -141,47 +138,42 @@ export default withStyles((theme) => {
       },
     },
     selected: {
-      lineHeight: 2,
-      marginTop: theme.spacing.unit / 2,
       backgroundColor: color.primaryLight(),
+      color: theme.palette.common.black,
+      lineHeight: `${theme.spacing.unit * 3}px`,
       '& > *': {
         backgroundColor: color.primaryLight(),
       },
     },
     highlight: {
       border: `dashed 2px ${color.disabled()}`,
-      lineHeight: 2,
-      boxSizing: 'border-box',
-      marginTop: theme.spacing.unit / 2,
-      display: 'inline-block',
-      padding: theme.spacing.unit,
+      lineHeight: `${theme.spacing.unit * 3}px`,
     },
     print: {
       border: `dashed 2px ${color.disabled()}`,
-      lineHeight: 2,
-      boxSizing: 'border-box',
-      marginTop: theme.spacing.unit / 2,
-      display: 'inline-block',
-      padding: theme.spacing.unit,
+      lineHeight: `${theme.spacing.unit * 3}px`,
       color: color.text(),
     },
-
     custom: {
       display: 'initial',
     },
     correct: {
       backgroundColor: color.correctSecondary(),
       border: `${color.correct()} solid 2px`,
-      lineHeight: `${theme.spacing.unit * 4}px`,
+      color: theme.palette.common.black,
+      lineHeight: `${theme.spacing.unit * 3}px`,
     },
     incorrect: {
       backgroundColor: color.incorrectSecondary(),
       border: `${color.missing()} solid 2px`,
-      lineHeight: `${theme.spacing.unit * 4}px`,
+      color: theme.palette.common.black,
+      lineHeight: `${theme.spacing.unit * 3}px`,
     },
     missing: {
       backgroundColor: color.incorrectSecondary(),
       border: `${color.missing()} dashed 2px`,
+      color: theme.palette.common.black,
+      lineHeight: `${theme.spacing.unit * 3}px`,
       textDecoration: `line-through ${color.missing()}`,
     },
     incorrectIcon: {
@@ -189,7 +181,6 @@ export default withStyles((theme) => {
       fontSize: 'larger',
       color: color.missing(),
     },
-
     correctIcon: {
       verticalAlign: 'middle',
       fontSize: 'larger',