@pie-lib/text-select 1.8.5 → 1.8.6-next.122

package/CHANGELOG.json

@@ -613,5 +613,20 @@
     "committerDate": "2021-08-09 09:58:13 +0300",
     "isTagged": true,
     "tag": "@pie-lib/text-select@1.8.5"
+  },
+  {
+    "type": "fix",
+    "scope": "select-text",
+    "subject": "made sure the new line characters are taken into consideration for offsets [PD-1145]",
+    "merge": null,
+    "header": "fix(select-text): made sure the new line characters are taken into consideration for offsets [PD-1145]",
+    "body": null,
+    "footer": null,
+    "notes": [],
+    "hash": "a7bb44a833e2931177e122010aa160a924982530",
+    "gitTags": " (origin/feat/PD-1145-new-line-offset-handling)",
+    "committerDate": "2021-09-24 13:15:39 +0300",
+    "isTagged": true,
+    "tag": "@pie-lib/text-select@1.8.8"
   }
 ]

package/CHANGELOG.md

@@ -24,152 +24,84 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [1.8.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.8.2...@pie-lib/text-select@1.8.3) (2021-07-23)
 
-
 ### Bug Fixes
 
-* **text-select:** Fixed white space collapse PD-477 ([1f9481f](https://github.com/pie-framework/pie-lib/commit/1f9481f))
-
-
-
-
+- **text-select:** Fixed white space collapse PD-477 ([1f9481f](https://github.com/pie-framework/pie-lib/commit/1f9481f))
 
 ## [1.8.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.8.0...@pie-lib/text-select@1.8.2) (2021-06-25)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
-
-
-
-
 # [1.8.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.7.13...@pie-lib/text-select@1.8.0) (2021-06-25)
 
-
 ### Bug Fixes
 
-* **text-select:** fix incorrect indenting PD-1038 ([4d56509](https://github.com/pie-framework/pie-lib/commit/4d56509))
-* **text-select:** select text view mode should use black for text color PD-1154 ([0db5b1e](https://github.com/pie-framework/pie-lib/commit/0db5b1e))
-
+- **text-select:** fix incorrect indenting PD-1038 ([4d56509](https://github.com/pie-framework/pie-lib/commit/4d56509))
+- **text-select:** select text view mode should use black for text color PD-1154 ([0db5b1e](https://github.com/pie-framework/pie-lib/commit/0db5b1e))
 
 ### Features
 
-* **text-select:** when select-text item permits only one selection, change behavior of gather PD-958 ([c181314](https://github.com/pie-framework/pie-lib/commit/c181314))
-
-
-
-
+- **text-select:** when select-text item permits only one selection, change behavior of gather PD-958 ([c181314](https://github.com/pie-framework/pie-lib/commit/c181314))
 
 ## [1.7.13](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.7.12...@pie-lib/text-select@1.7.13) (2021-03-01)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
-
-
-
-
 ## [1.7.12](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.7.11...@pie-lib/text-select@1.7.12) (2021-03-01)
 
-
 ### Bug Fixes
 
-* **text-select:** fix layout for legacy items with line number ([d50865e](https://github.com/pie-framework/pie-lib/commit/d50865e))
-* **text-select:** fix padding for tokens in order to fix PD-860 ([eacb81c](https://github.com/pie-framework/pie-lib/commit/eacb81c))
-* **text-select:** show tokens if they are selected in view mode to fix PD-464 ([7821536](https://github.com/pie-framework/pie-lib/commit/7821536))
-
-
-
-
+- **text-select:** fix layout for legacy items with line number ([d50865e](https://github.com/pie-framework/pie-lib/commit/d50865e))
+- **text-select:** fix padding for tokens in order to fix PD-860 ([eacb81c](https://github.com/pie-framework/pie-lib/commit/eacb81c))
+- **text-select:** show tokens if they are selected in view mode to fix PD-464 ([7821536](https://github.com/pie-framework/pie-lib/commit/7821536))
 
 ## [1.7.11](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.7.10...@pie-lib/text-select@1.7.11) (2021-02-15)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
-
-
-
-
 ## [1.7.10](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.7.8...@pie-lib/text-select@1.7.10) (2021-02-15)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
-
-
-
-
 ## [1.7.8](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.7.7...@pie-lib/text-select@1.7.8) (2021-02-15)
 
-
 ### Bug Fixes
 
-* **text-select:** fix space between lines ([5633537](https://github.com/pie-framework/pie-lib/commit/5633537))
-
-
-
-
+- **text-select:** fix space between lines ([5633537](https://github.com/pie-framework/pie-lib/commit/5633537))
 
 ## [1.7.7](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.7.6...@pie-lib/text-select@1.7.7) (2021-02-01)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
-
-
-
-
 ## [1.7.6](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.7.5...@pie-lib/text-select@1.7.6) (2021-01-28)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
-
-
-
-
 ## [1.7.5](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.7.4...@pie-lib/text-select@1.7.5) (2021-01-28)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
-
-
-
-
 ## [1.7.4](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.7.3...@pie-lib/text-select@1.7.4) (2021-01-25)
 
-
 ### Bug Fixes
 
-* **text-select:** fix token rendering issue - PD-642 ([89f3b70](https://github.com/pie-framework/pie-lib/commit/89f3b70))
-
-
-
-
+- **text-select:** fix token rendering issue - PD-642 ([89f3b70](https://github.com/pie-framework/pie-lib/commit/89f3b70))
 
 ## [1.7.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.7.2...@pie-lib/text-select@1.7.3) (2021-01-11)
 
-
 ### Bug Fixes
 
-* Added fix for style changes after selection of max tokens PD-646 ([30183a9](https://github.com/pie-framework/pie-lib/commit/30183a9))
-
-
-
-
+- Added fix for style changes after selection of max tokens PD-646 ([30183a9](https://github.com/pie-framework/pie-lib/commit/30183a9))
 
 ## [1.7.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.7.1...@pie-lib/text-select@1.7.2) (2020-10-29)
 
 **Note:** Version bump only for package @pie-lib/text-select
 
-
-
-
-
 ## [1.7.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.7.0...@pie-lib/text-select@1.7.1) (2020-10-26)
 
-
 ### Bug Fixes
 
-* **select-text:** fix text indent styling for tokens ([0d13170](https://github.com/pie-framework/pie-lib/commit/0d13170))
-
-
-
-
+- **select-text:** fix text indent styling for tokens ([0d13170](https://github.com/pie-framework/pie-lib/commit/0d13170))
 
 # [1.7.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.6.1...@pie-lib/text-select@1.7.0) (2020-10-26)
 

package/lib/text-select.js

@@ -97,7 +97,8 @@ function (_React$Component) {
           selectedTokens = _this$props.selectedTokens,
           className = _this$props.className,
           highlightChoices = _this$props.highlightChoices,
-          maxNoOfSelections = _this$props.maxNoOfSelections;
+          maxNoOfSelections = _this$props.maxNoOfSelections,
+          animationsDisabled = _this$props.animationsDisabled;
       var normalized = (0, _builder.normalize)(text, tokens);
       log('normalized: ', normalized);
       var prepped = normalized.map(function (t) {
@@ -118,7 +119,8 @@ function (_React$Component) {
         tokens: prepped,
         disabled: disabled,
         onChange: this.change,
-        maxNoOfSelections: maxNoOfSelections
+        maxNoOfSelections: maxNoOfSelections,
+        animationsDisabled: animationsDisabled
       });
     }
   }]);
@@ -136,6 +138,7 @@ _defineProperty(TextSelect, "propTypes", {
   text: _propTypes["default"].string.isRequired,
   className: _propTypes["default"].string,
   highlightChoices: _propTypes["default"].bool,
+  animationsDisabled: _propTypes["default"].bool,
   maxNoOfSelections: _propTypes["default"].number
 });
 //# sourceMappingURL=text-select.js.map

package/lib/text-select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/text-select.jsx"],"names":["log","TextSelect","tokens","onChange","props","out","filter","t","selected","map","start","end","text","disabled","selectedTokens","className","highlightChoices","maxNoOfSelections","normalized","prepped","selectedIndex","findIndex","s","correct","undefined","selectable","predefined","change","React","Component","PropTypes","func","bool","arrayOf","shape","TokenTypes","isRequired","string","number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport TokenSelect from './token-select';\nimport { normalize } from './tokenizer/builder';\nimport { TokenTypes } from './token-select/token';\nimport debug from 'debug';\nconst log = debug('@pie-lib:text-select');\n/**\n * Built on TokenSelect uses build.normalize to build the token set.\n */\nexport default class TextSelect extends React.Component {\n  static propTypes = {\n    onChange: PropTypes.func,\n    disabled: PropTypes.bool,\n    tokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,\n    selectedTokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,\n    text: PropTypes.string.isRequired,\n    className: PropTypes.string,\n    highlightChoices: PropTypes.bool,\n    maxNoOfSelections: PropTypes.number\n  };\n\n  change = tokens => {\n    const { onChange } = this.props;\n\n    if (!onChange) {\n      return;\n    }\n    const out = tokens.filter(t => t.selected).map(t => ({ start: t.start, end: t.end }));\n\n    onChange(out);\n  };\n\n  render() {\n    const {\n      text,\n      disabled,\n      tokens,\n      selectedTokens,\n      className,\n      highlightChoices,\n      maxNoOfSelections\n    } = this.props;\n\n    const normalized = normalize(text, tokens);\n    log('normalized: ', normalized);\n    const prepped = normalized.map(t => {\n      const selectedIndex = selectedTokens.findIndex(s => {\n        return s.start === t.start && s.end === t.end;\n      });\n      const selected = selectedIndex !== -1;\n      const correct = selected ? t.correct : undefined;\n      return {\n        ...t,\n        selectable: !disabled && t.predefined,\n        selected,\n        correct\n      };\n    });\n\n    return (\n      <TokenSelect\n        highlightChoices={!disabled && highlightChoices}\n        className={className}\n        tokens={prepped}\n        disabled={disabled}\n        onChange={this.change}\n        maxNoOfSelections={maxNoOfSelections}\n      />\n    );\n  }\n}\n"],"file":"text-select.js"}
+{"version":3,"sources":["../src/text-select.jsx"],"names":["log","TextSelect","tokens","onChange","props","out","filter","t","selected","map","start","end","text","disabled","selectedTokens","className","highlightChoices","maxNoOfSelections","animationsDisabled","normalized","prepped","selectedIndex","findIndex","s","correct","undefined","selectable","predefined","change","React","Component","PropTypes","func","bool","arrayOf","shape","TokenTypes","isRequired","string","number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport TokenSelect from './token-select';\nimport { normalize } from './tokenizer/builder';\nimport { TokenTypes } from './token-select/token';\nimport debug from 'debug';\nconst log = debug('@pie-lib:text-select');\n/**\n * Built on TokenSelect uses build.normalize to build the token set.\n */\nexport default class TextSelect extends React.Component {\n  static propTypes = {\n    onChange: PropTypes.func,\n    disabled: PropTypes.bool,\n    tokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,\n    selectedTokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,\n    text: PropTypes.string.isRequired,\n    className: PropTypes.string,\n    highlightChoices: PropTypes.bool,\n    animationsDisabled: PropTypes.bool,\n    maxNoOfSelections: PropTypes.number\n  };\n\n  change = tokens => {\n    const { onChange } = this.props;\n\n    if (!onChange) {\n      return;\n    }\n    const out = tokens.filter(t => t.selected).map(t => ({ start: t.start, end: t.end }));\n\n    onChange(out);\n  };\n\n  render() {\n    const {\n      text,\n      disabled,\n      tokens,\n      selectedTokens,\n      className,\n      highlightChoices,\n      maxNoOfSelections,\n      animationsDisabled\n    } = this.props;\n\n    const normalized = normalize(text, tokens);\n    log('normalized: ', normalized);\n    const prepped = normalized.map(t => {\n      const selectedIndex = selectedTokens.findIndex(s => {\n        return s.start === t.start && s.end === t.end;\n      });\n      const selected = selectedIndex !== -1;\n      const correct = selected ? t.correct : undefined;\n      return {\n        ...t,\n        selectable: !disabled && t.predefined,\n        selected,\n        correct\n      };\n    });\n\n    return (\n      <TokenSelect\n        highlightChoices={!disabled && highlightChoices}\n        className={className}\n        tokens={prepped}\n        disabled={disabled}\n        onChange={this.change}\n        maxNoOfSelections={maxNoOfSelections}\n        animationsDisabled={animationsDisabled}\n      />\n    );\n  }\n}\n"],"file":"text-select.js"}

package/lib/token-select/index.js

@@ -94,16 +94,18 @@ function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "toggleToken", function (event) {
       var target = event.target;
-      var tokens = _this.props.tokens;
+      var _this$props = _this.props,
+          tokens = _this$props.tokens,
+          animationsDisabled = _this$props.animationsDisabled;
       var tokensCloned = (0, _clone["default"])(tokens);
       var targetSpanWrapper = target.closest(".".concat(_token["default"].rootClassName));
       var targetedTokenIndex = targetSpanWrapper && targetSpanWrapper.dataset && targetSpanWrapper.dataset.indexkey;
       var t = targetedTokenIndex && tokensCloned[targetedTokenIndex];
 
-      if (t && t.correct === undefined) {
-        var _this$props = _this.props,
-            onChange = _this$props.onChange,
-            maxNoOfSelections = _this$props.maxNoOfSelections;
+      if (t && t.correct === undefined && !animationsDisabled) {
+        var _this$props2 = _this.props,
+            onChange = _this$props2.onChange,
+            maxNoOfSelections = _this$props2.maxNoOfSelections;
         var selected = !t.selected;
 
         if (maxNoOfSelections === 1 && _this.selectedCount() === 1) {
@@ -145,10 +147,11 @@ function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "generateTokensInHtml", function () {
-      var _this$props2 = _this.props,
-          tokens = _this$props2.tokens,
-          disabled = _this$props2.disabled,
-          highlightChoices = _this$props2.highlightChoices;
+      var _this$props3 = _this.props,
+          tokens = _this$props3.tokens,
+          disabled = _this$props3.disabled,
+          highlightChoices = _this$props3.highlightChoices,
+          animationsDisabled = _this$props3.animationsDisabled;
 
       var selectedCount = _this.selectedCount();
 
@@ -172,19 +175,20 @@ function (_React$Component) {
 
         if (isLineBreak(t.text)) {
           return finalAcc + '<br>';
-        } //modified (selectable && !disabled) to !disabled to fix PD-646
-
-
-        if (!disabled || showCorrectAnswer || t.selected) {
-          return finalAcc + (0, _server.renderToString)(_react["default"].createElement(_token["default"], _extends({
-            key: index,
-            disabled: disabled,
-            index: index
-          }, t, {
-            selectable: selectable,
-            highlight: highlightChoices
-          })));
-        } else {
+        }
+
+        if (selectable && !disabled || showCorrectAnswer || t.selected || animationsDisabled && t.predefined // if we are in print mode
+        ) {
+            return finalAcc + (0, _server.renderToString)(_react["default"].createElement(_token["default"], _extends({
+              key: index,
+              disabled: disabled,
+              index: index
+            }, t, {
+              selectable: selectable,
+              highlight: highlightChoices,
+              animationsDisabled: animationsDisabled
+            })));
+          } else {
           return accumulator + t.text;
         }
       };
@@ -199,9 +203,9 @@ function (_React$Component) {
   _createClass(TokenSelect, [{
     key: "render",
     value: function render() {
-      var _this$props3 = this.props,
-          classes = _this$props3.classes,
-          classNameProp = _this$props3.className;
+      var _this$props4 = this.props,
+          classes = _this$props4.classes,
+          classNameProp = _this$props4.className;
       var className = (0, _classnames["default"])(classes.tokenSelect, classNameProp);
       var html = this.generateTokensInHtml();
       return _react["default"].createElement("div", {
@@ -226,6 +230,7 @@ _defineProperty(TokenSelect, "propTypes", {
   onChange: _propTypes["default"].func.isRequired,
   disabled: _propTypes["default"].bool,
   highlightChoices: _propTypes["default"].bool,
+  animationsDisabled: _propTypes["default"].bool,
   maxNoOfSelections: _propTypes["default"].number
 });
 

package/lib/token-select/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/token-select/index.jsx"],"names":["log","TokenSelect","props","tokens","filter","t","selected","length","selectedCount","maxNoOfSelections","isFinite","event","target","tokensCloned","targetSpanWrapper","closest","Token","rootClassName","targetedTokenIndex","dataset","indexkey","correct","undefined","onChange","selectedToken","updatedTokens","map","token","selectable","update","splice","disabled","highlightChoices","isLineBreak","text","isNewParagraph","reducer","accumulator","index","canSelectMore","showCorrectAnswer","finalAcc","reduceResult","reduce","classes","classNameProp","className","tokenSelect","html","generateTokensInHtml","__html","toggleToken","React","Component","PropTypes","arrayOf","shape","TokenTypes","isRequired","string","object","func","bool","number","backgroundColor","whiteSpace"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,GAAG,GAAG,uBAAM,mCAAN,CAAZ;;IAEaC,W;;;;;;;;;;;;;;;;;;oEAiBK;AAAA,aAAM,MAAKC,KAAL,CAAWC,MAAX,CAAkBC,MAAlB,CAAyB,UAAAC,CAAC;AAAA,eAAIA,CAAC,CAACC,QAAN;AAAA,OAA1B,EAA0CC,MAAhD;AAAA,K;;oEAEA,UAAAC,aAAa,EAAI;AAAA,UACvBC,iBADuB,GACD,MAAKP,KADJ,CACvBO,iBADuB;;AAG/B,UAAIA,iBAAiB,KAAK,CAA1B,EAA6B;AAC3B,eAAO,IAAP;AACD;;AAEDT,MAAAA,GAAG,CAAC,qCAAD,EAAwCS,iBAAxC,EAA2D,iBAA3D,EAA8ED,aAA9E,CAAH;AACA,aACEC,iBAAiB,IAAI,CAArB,IAA2BC,QAAQ,CAACD,iBAAD,CAAR,IAA+BD,aAAa,GAAGC,iBAD5E;AAGD,K;;kEAUa,UAAAE,KAAK,EAAI;AAAA,UACbC,MADa,GACFD,KADE,CACbC,MADa;AAAA,UAEbT,MAFa,GAEF,MAAKD,KAFH,CAEbC,MAFa;AAGrB,UAAMU,YAAY,GAAG,uBAAMV,MAAN,CAArB;AACA,UAAMW,iBAAiB,GAAGF,MAAM,CAACG,OAAP,YAAmBC,kBAAMC,aAAzB,EAA1B;AACA,UAAMC,kBAAkB,GACtBJ,iBAAiB,IAAIA,iBAAiB,CAACK,OAAvC,IAAkDL,iBAAiB,CAACK,OAAlB,CAA0BC,QAD9E;AAEA,UAAMf,CAAC,GAAGa,kBAAkB,IAAIL,YAAY,CAACK,kBAAD,CAA5C;;AAEA,UAAIb,CAAC,IAAIA,CAAC,CAACgB,OAAF,KAAcC,SAAvB,EAAkC;AAAA,0BACQ,MAAKpB,KADb;AAAA,YACxBqB,QADwB,eACxBA,QADwB;AAAA,YACdd,iBADc,eACdA,iBADc;AAEhC,YAAMH,QAAQ,GAAG,CAACD,CAAC,CAACC,QAApB;;AAEA,YAAIG,iBAAiB,KAAK,CAAtB,IAA2B,MAAKD,aAAL,OAAyB,CAAxD,EAA2D;AACzD,cAAMgB,aAAa,GAAG,CAACrB,MAAM,IAAI,EAAX,EAAeC,MAAf,CAAsB,UAAAC,CAAC;AAAA,mBAAIA,CAAC,CAACC,QAAN;AAAA,WAAvB,CAAtB;AAEA,cAAMmB,aAAa,GAAGZ,YAAY,CAACa,GAAb,CAAiB,UAAAC,KAAK,EAAI;AAC9C,gBAAI,yBAAQA,KAAR,EAAeH,aAAa,CAAC,CAAD,CAA5B,CAAJ,EAAsC;AACpC,uCAAYG,KAAZ;AAAmBrB,gBAAAA,QAAQ,EAAE;AAA7B;AACD;;AAED,qCAAYqB,KAAZ;AAAmBC,cAAAA,UAAU,EAAE;AAA/B;AACD,WANqB,CAAtB;;AAQA,cAAMC,MAAM,qBAAQxB,CAAR;AAAWC,YAAAA,QAAQ,EAAE,CAACD,CAAC,CAACC;AAAxB,YAAZ;;AAEAmB,UAAAA,aAAa,CAACK,MAAd,CAAqBZ,kBAArB,EAAyC,CAAzC,EAA4CW,MAA5C;AACAN,UAAAA,QAAQ,CAACE,aAAD,CAAR;AACD,SAfD,MAeO;AACL,cAAInB,QAAQ,IAAIG,iBAAiB,GAAG,CAAhC,IAAqC,MAAKD,aAAL,MAAwBC,iBAAjE,EAAoF;AAClFT,YAAAA,GAAG,CAAC,yBAAD,CAAH;AACA;AACD;;AAED,cAAM6B,OAAM,qBAAQxB,CAAR;AAAWC,YAAAA,QAAQ,EAAE,CAACD,CAAC,CAACC;AAAxB,YAAZ;;AAEAO,UAAAA,YAAY,CAACiB,MAAb,CAAoBZ,kBAApB,EAAwC,CAAxC,EAA2CW,OAA3C;AACAN,UAAAA,QAAQ,CAACV,YAAD,CAAR;AACD;AACF;AACF,K;;2EAEsB,YAAM;AAAA,yBACoB,MAAKX,KADzB;AAAA,UACnBC,MADmB,gBACnBA,MADmB;AAAA,UACX4B,QADW,gBACXA,QADW;AAAA,UACDC,gBADC,gBACDA,gBADC;;AAE3B,UAAMxB,aAAa,GAAG,MAAKA,aAAL,EAAtB;;AACA,UAAMyB,WAAW,GAAG,SAAdA,WAAc,CAAAC,IAAI;AAAA,eAAIA,IAAI,KAAK,IAAb;AAAA,OAAxB;;AACA,UAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAAAD,IAAI;AAAA,eAAIA,IAAI,KAAK,MAAb;AAAA,OAA3B;;AAEA,UAAME,OAAO,GAAG,SAAVA,OAAU,CAACC,WAAD,EAAchC,CAAd,EAAiBiC,KAAjB,EAA2B;AACzC,YAAMV,UAAU,GAAGvB,CAAC,CAACC,QAAF,IAAeD,CAAC,CAACuB,UAAF,IAAgB,MAAKW,aAAL,CAAmB/B,aAAnB,CAAlD;;AACA,YAAMgC,iBAAiB,GAAGnC,CAAC,CAACgB,OAAF,KAAcC,SAAd,KAA4BjB,CAAC,CAACuB,UAAF,IAAgBvB,CAAC,CAACC,QAA9C,CAA1B;AACA,YAAImC,QAAQ,GAAGJ,WAAf;;AAEA,YAAIF,cAAc,CAAC9B,CAAC,CAAC6B,IAAH,CAAlB,EAA4B;AAC1B,iBAAOO,QAAQ,GAAG,SAAlB;AACD;;AAED,YAAIR,WAAW,CAAC5B,CAAC,CAAC6B,IAAH,CAAf,EAAyB;AACvB,iBAAOO,QAAQ,GAAG,MAAlB;AACD,SAXwC,CAazC;;;AACA,YAAI,CAACV,QAAD,IAAaS,iBAAb,IAAkCnC,CAAC,CAACC,QAAxC,EAAkD;AAChD,iBACEmC,QAAQ,GACR,4BACE,gCAAC,iBAAD;AACE,YAAA,GAAG,EAAEH,KADP;AAEE,YAAA,QAAQ,EAAEP,QAFZ;AAGE,YAAA,KAAK,EAAEO;AAHT,aAIMjC,CAJN;AAKE,YAAA,UAAU,EAAEuB,UALd;AAME,YAAA,SAAS,EAAEI;AANb,aADF,CAFF;AAaD,SAdD,MAcO;AACL,iBAAOK,WAAW,GAAGhC,CAAC,CAAC6B,IAAvB;AACD;AACF,OA/BD;;AAiCA,UAAMQ,YAAY,GAAG,CAACvC,MAAM,IAAI,EAAX,EAAewC,MAAf,CAAsBP,OAAtB,EAA+B,KAA/B,CAArB;AAEA,aAAOM,YAAY,GAAG,MAAtB;AACD,K;;;;;;;6BAEQ;AAAA,yBACuC,KAAKxC,KAD5C;AAAA,UACC0C,OADD,gBACCA,OADD;AAAA,UACqBC,aADrB,gBACUC,SADV;AAEP,UAAMA,SAAS,GAAG,4BAAWF,OAAO,CAACG,WAAnB,EAAgCF,aAAhC,CAAlB;AACA,UAAMG,IAAI,GAAG,KAAKC,oBAAL,EAAb;AAEA,aACE;AACE,QAAA,SAAS,EAAEH,SADb;AAEE,QAAA,uBAAuB,EAAE;AAAEI,UAAAA,MAAM,EAAEF;AAAV,SAF3B;AAGE,QAAA,OAAO,EAAE,KAAKG;AAHhB,QADF;AAOD;;;;EA1I8BC,kBAAMC,S;;;;gBAA1BpD,W,eACQ;AACjBE,EAAAA,MAAM,EAAEmD,sBAAUC,OAAV,CAAkBD,sBAAUE,KAAV,CAAgBC,iBAAhB,CAAlB,EAA+CC,UADtC;AAEjBZ,EAAAA,SAAS,EAAEQ,sBAAUK,MAFJ;AAGjBf,EAAAA,OAAO,EAAEU,sBAAUM,MAAV,CAAiBF,UAHT;AAIjBnC,EAAAA,QAAQ,EAAE+B,sBAAUO,IAAV,CAAeH,UAJR;AAKjB3B,EAAAA,QAAQ,EAAEuB,sBAAUQ,IALH;AAMjB9B,EAAAA,gBAAgB,EAAEsB,sBAAUQ,IANX;AAOjBrD,EAAAA,iBAAiB,EAAE6C,sBAAUS;AAPZ,C;;gBADR9D,W,kBAWW;AACpB+B,EAAAA,gBAAgB,EAAE,KADE;AAEpBvB,EAAAA,iBAAiB,EAAE,CAFC;AAGpBN,EAAAA,MAAM,EAAE;AAHY,C;;eAkIT,wBAAW;AAAA,SAAO;AAC/B4C,IAAAA,WAAW;AACTiB,MAAAA,eAAe,EAAE,MADR;AAETC,MAAAA,UAAU,EAAE;AAFH,OAGN,2BAHM;AAIT,aAAO;AACLA,QAAAA,UAAU,EAAE;AADP;AAJE;AADoB,GAAP;AAAA,CAAX,EASXhE,WATW,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Token, { TokenTypes } from './token';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport clone from 'lodash/clone';\nimport debug from 'debug';\nimport { noSelect } from '@pie-lib/style-utils';\nimport { renderToString } from 'react-dom/server';\nimport isEqual from 'lodash/isEqual';\n\nconst log = debug('@pie-lib:text-select:token-select');\n\nexport class TokenSelect extends React.Component {\n  static propTypes = {\n    tokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,\n    className: PropTypes.string,\n    classes: PropTypes.object.isRequired,\n    onChange: PropTypes.func.isRequired,\n    disabled: PropTypes.bool,\n    highlightChoices: PropTypes.bool,\n    maxNoOfSelections: PropTypes.number\n  };\n\n  static defaultProps = {\n    highlightChoices: false,\n    maxNoOfSelections: 0,\n    tokens: []\n  };\n\n  selectedCount = () => this.props.tokens.filter(t => t.selected).length;\n\n  canSelectMore = selectedCount => {\n    const { maxNoOfSelections } = this.props;\n\n    if (maxNoOfSelections === 1) {\n      return true;\n    }\n\n    log('[canSelectMore] maxNoOfSelections: ', maxNoOfSelections, 'selectedCount: ', selectedCount);\n    return (\n      maxNoOfSelections <= 0 || (isFinite(maxNoOfSelections) && selectedCount < maxNoOfSelections)\n    );\n  };\n\n  /**\n   @function\n   @param { object } event\n\n   @description\n    each token is wrapped into a span that has Token.rootClassName class and indexkey attribute (represents the index of the token)\n    tokens are updated with the targeted token having the correct value set for 'selected' property\n   */\n  toggleToken = event => {\n    const { target } = event;\n    const { tokens } = this.props;\n    const tokensCloned = clone(tokens);\n    const targetSpanWrapper = target.closest(`.${Token.rootClassName}`);\n    const targetedTokenIndex =\n      targetSpanWrapper && targetSpanWrapper.dataset && targetSpanWrapper.dataset.indexkey;\n    const t = targetedTokenIndex && tokensCloned[targetedTokenIndex];\n\n    if (t && t.correct === undefined) {\n      const { onChange, maxNoOfSelections } = this.props;\n      const selected = !t.selected;\n\n      if (maxNoOfSelections === 1 && this.selectedCount() === 1) {\n        const selectedToken = (tokens || []).filter(t => t.selected);\n\n        const updatedTokens = tokensCloned.map(token => {\n          if (isEqual(token, selectedToken[0])) {\n            return { ...token, selected: false };\n          }\n\n          return { ...token, selectable: true };\n        });\n\n        const update = { ...t, selected: !t.selected };\n\n        updatedTokens.splice(targetedTokenIndex, 1, update);\n        onChange(updatedTokens);\n      } else {\n        if (selected && maxNoOfSelections > 0 && this.selectedCount() >= maxNoOfSelections) {\n          log('skip toggle max reached');\n          return;\n        }\n\n        const update = { ...t, selected: !t.selected };\n\n        tokensCloned.splice(targetedTokenIndex, 1, update);\n        onChange(tokensCloned);\n      }\n    }\n  };\n\n  generateTokensInHtml = () => {\n    const { tokens, disabled, highlightChoices } = this.props;\n    const selectedCount = this.selectedCount();\n    const isLineBreak = text => text === '\\n';\n    const isNewParagraph = text => text === '\\n\\n';\n\n    const reducer = (accumulator, t, index) => {\n      const selectable = t.selected || (t.selectable && this.canSelectMore(selectedCount));\n      const showCorrectAnswer = t.correct !== undefined && (t.selectable || t.selected);\n      let finalAcc = accumulator;\n\n      if (isNewParagraph(t.text)) {\n        return finalAcc + '</p><p>';\n      }\n\n      if (isLineBreak(t.text)) {\n        return finalAcc + '<br>';\n      }\n\n      //modified (selectable && !disabled) to !disabled to fix PD-646\n      if (!disabled || showCorrectAnswer || t.selected) {\n        return (\n          finalAcc +\n          renderToString(\n            <Token\n              key={index}\n              disabled={disabled}\n              index={index}\n              {...t}\n              selectable={selectable}\n              highlight={highlightChoices}\n            />\n          )\n        );\n      } else {\n        return accumulator + t.text;\n      }\n    };\n\n    const reduceResult = (tokens || []).reduce(reducer, '<p>');\n\n    return reduceResult + '</p>';\n  };\n\n  render() {\n    const { classes, className: classNameProp } = this.props;\n    const className = classNames(classes.tokenSelect, classNameProp);\n    const html = this.generateTokensInHtml();\n\n    return (\n      <div\n        className={className}\n        dangerouslySetInnerHTML={{ __html: html }}\n        onClick={this.toggleToken}\n      />\n    );\n  }\n}\n\nexport default withStyles(() => ({\n  tokenSelect: {\n    backgroundColor: 'none',\n    whiteSpace: 'pre',\n    ...noSelect(),\n    '& p': {\n      whiteSpace: 'break-spaces'\n    }\n  }\n}))(TokenSelect);\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/token-select/index.jsx"],"names":["log","TokenSelect","props","tokens","filter","t","selected","length","selectedCount","maxNoOfSelections","isFinite","event","target","animationsDisabled","tokensCloned","targetSpanWrapper","closest","Token","rootClassName","targetedTokenIndex","dataset","indexkey","correct","undefined","onChange","selectedToken","updatedTokens","map","token","selectable","update","splice","disabled","highlightChoices","isLineBreak","text","isNewParagraph","reducer","accumulator","index","canSelectMore","showCorrectAnswer","finalAcc","predefined","reduceResult","reduce","classes","classNameProp","className","tokenSelect","html","generateTokensInHtml","__html","toggleToken","React","Component","PropTypes","arrayOf","shape","TokenTypes","isRequired","string","object","func","bool","number","backgroundColor","whiteSpace"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Token, { TokenTypes } from './token';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport clone from 'lodash/clone';\nimport debug from 'debug';\nimport { noSelect } from '@pie-lib/style-utils';\nimport { renderToString } from 'react-dom/server';\nimport isEqual from 'lodash/isEqual';\n\nconst log = debug('@pie-lib:text-select:token-select');\n\nexport class TokenSelect extends React.Component {\n  static propTypes = {\n    tokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,\n    className: PropTypes.string,\n    classes: PropTypes.object.isRequired,\n    onChange: PropTypes.func.isRequired,\n    disabled: PropTypes.bool,\n    highlightChoices: PropTypes.bool,\n    animationsDisabled: PropTypes.bool,\n    maxNoOfSelections: PropTypes.number\n  };\n\n  static defaultProps = {\n    highlightChoices: false,\n    maxNoOfSelections: 0,\n    tokens: []\n  };\n\n  selectedCount = () => this.props.tokens.filter(t => t.selected).length;\n\n  canSelectMore = selectedCount => {\n    const { maxNoOfSelections } = this.props;\n\n    if (maxNoOfSelections === 1) {\n      return true;\n    }\n\n    log('[canSelectMore] maxNoOfSelections: ', maxNoOfSelections, 'selectedCount: ', selectedCount);\n    return (\n      maxNoOfSelections <= 0 || (isFinite(maxNoOfSelections) && selectedCount < maxNoOfSelections)\n    );\n  };\n\n  /**\n   @function\n   @param { object } event\n\n   @description\n    each token is wrapped into a span that has Token.rootClassName class and indexkey attribute (represents the index of the token)\n    tokens are updated with the targeted token having the correct value set for 'selected' property\n   */\n  toggleToken = event => {\n    const { target } = event;\n    const { tokens, animationsDisabled } = this.props;\n    const tokensCloned = clone(tokens);\n    const targetSpanWrapper = target.closest(`.${Token.rootClassName}`);\n    const targetedTokenIndex =\n      targetSpanWrapper && targetSpanWrapper.dataset && targetSpanWrapper.dataset.indexkey;\n    const t = targetedTokenIndex && tokensCloned[targetedTokenIndex];\n\n    if (t && t.correct === undefined && !animationsDisabled) {\n      const { onChange, maxNoOfSelections } = this.props;\n      const selected = !t.selected;\n\n      if (maxNoOfSelections === 1 && this.selectedCount() === 1) {\n        const selectedToken = (tokens || []).filter(t => t.selected);\n\n        const updatedTokens = tokensCloned.map(token => {\n          if (isEqual(token, selectedToken[0])) {\n            return { ...token, selected: false };\n          }\n\n          return { ...token, selectable: true };\n        });\n\n        const update = { ...t, selected: !t.selected };\n\n        updatedTokens.splice(targetedTokenIndex, 1, update);\n        onChange(updatedTokens);\n      } else {\n        if (selected && maxNoOfSelections > 0 && this.selectedCount() >= maxNoOfSelections) {\n          log('skip toggle max reached');\n          return;\n        }\n\n        const update = { ...t, selected: !t.selected };\n\n        tokensCloned.splice(targetedTokenIndex, 1, update);\n        onChange(tokensCloned);\n      }\n    }\n  };\n\n  generateTokensInHtml = () => {\n    const { tokens, disabled, highlightChoices, animationsDisabled } = this.props;\n    const selectedCount = this.selectedCount();\n    const isLineBreak = text => text === '\\n';\n    const isNewParagraph = text => text === '\\n\\n';\n\n    const reducer = (accumulator, t, index) => {\n      const selectable = t.selected || (t.selectable && this.canSelectMore(selectedCount));\n      const showCorrectAnswer = t.correct !== undefined && (t.selectable || t.selected);\n      let finalAcc = accumulator;\n\n      if (isNewParagraph(t.text)) {\n        return finalAcc + '</p><p>';\n      }\n\n      if (isLineBreak(t.text)) {\n        return finalAcc + '<br>';\n      }\n\n      if (\n        (selectable && !disabled) ||\n        showCorrectAnswer ||\n        t.selected ||\n        (animationsDisabled && t.predefined) // if we are in print mode\n      ) {\n        return (\n          finalAcc +\n          renderToString(\n            <Token\n              key={index}\n              disabled={disabled}\n              index={index}\n              {...t}\n              selectable={selectable}\n              highlight={highlightChoices}\n              animationsDisabled={animationsDisabled}\n            />\n          )\n        );\n      } else {\n        return accumulator + t.text;\n      }\n    };\n\n    const reduceResult = (tokens || []).reduce(reducer, '<p>');\n\n    return reduceResult + '</p>';\n  };\n\n  render() {\n    const { classes, className: classNameProp } = this.props;\n    const className = classNames(classes.tokenSelect, classNameProp);\n    const html = this.generateTokensInHtml();\n\n    return (\n      <div\n        className={className}\n        dangerouslySetInnerHTML={{ __html: html }}\n        onClick={this.toggleToken}\n      />\n    );\n  }\n}\n\nexport default withStyles(() => ({\n  tokenSelect: {\n    backgroundColor: 'none',\n    whiteSpace: 'pre',\n    ...noSelect(),\n    '& p': {\n      whiteSpace: 'break-spaces'\n    }\n  }\n}))(TokenSelect);\n"],"file":"index.js"}

package/lib/token-select/token.js

@@ -70,7 +70,8 @@ function (_React$Component) {
           disabled = _this$props.disabled,
           index = _this$props.index,
           highlight = _this$props.highlight,
-          correct = _this$props.correct;
+          correct = _this$props.correct,
+          animationsDisabled = _this$props.animationsDisabled;
       var className;
 
       if (correct === undefined && selected && disabled) {
@@ -78,7 +79,7 @@ function (_React$Component) {
       } else if (correct !== undefined) {
         className = (0, _classnames["default"])(Token.rootClassName, classes.custom, correct === true && classes.correct, correct === false && classes.incorrect);
       } else {
-        className = (0, _classnames["default"])(Token.rootClassName, classes.token, disabled && classes.disabled, selectable && !disabled && classes.selectable, selected && !disabled && classes.selected, selected && disabled && classes.disabledAndSelected, highlight && selectable && !disabled && !selected && classes.highlight, classNameProp);
+        className = (0, _classnames["default"])(Token.rootClassName, classes.token, disabled && classes.disabled, selectable && !disabled && classes.selectable, selected && !disabled && classes.selected, selected && disabled && classes.disabledAndSelected, highlight && selectable && !disabled && !selected && classes.highlight, animationsDisabled && classes.print, classNameProp);
       }
 
       return _react["default"].createElement("span", {
@@ -162,6 +163,15 @@ var _default = (0, _styles.withStyles)(function (theme) {
       display: 'inline-block',
       padding: theme.spacing.unit
     },
+    print: {
+      border: 'dashed 2px gray',
+      lineHeight: 2,
+      boxSizing: 'border-box',
+      marginTop: theme.spacing.unit / 2,
+      display: 'inline-block',
+      padding: theme.spacing.unit,
+      color: _renderUi.color.text()
+    },
     custom: {
       display: 'initial'
     },

package/lib/token-select/token.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/token-select/token.jsx"],"names":["TokenTypes","text","PropTypes","string","selectable","bool","Token","props","selected","classes","classNameProp","className","disabled","index","highlight","correct","undefined","token","disabledBlack","rootClassName","custom","incorrect","disabledAndSelected","__html","replace","React","Component","object","isRequired","theme","cursor","textIndent","padding","spacing","unit","paddingRight","paddingLeft","transition","color","backgroundColor","primaryLight","lineHeight","marginTop","border","boxSizing","display"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport { color } from '@pie-lib/render-ui';\n\nexport const TokenTypes = {\n  text: PropTypes.string,\n  selectable: PropTypes.bool\n};\n\nexport class Token extends React.Component {\n  static rootClassName = 'tokenRootClass';\n\n  static propTypes = {\n    ...TokenTypes,\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    disabled: PropTypes.bool,\n    highlight: PropTypes.bool,\n    correct: PropTypes.bool,\n    text: PropTypes.string.isRequired\n  };\n\n  static defaultProps = {\n    selectable: false,\n    text: ''\n  };\n\n  render() {\n    const {\n      text,\n      selectable,\n      selected,\n      classes,\n      className: classNameProp,\n      disabled,\n      index,\n      highlight,\n      correct\n    } = this.props;\n\n    let className;\n\n    if (correct === undefined && selected && disabled) {\n      className = classNames(classes.token, classes.selected, classes.disabledBlack);\n    } else if (correct !== undefined) {\n      className = classNames(\n        Token.rootClassName,\n        classes.custom,\n        correct === true && classes.correct,\n        correct === false && classes.incorrect\n      );\n    } else {\n      className = classNames(\n        Token.rootClassName,\n        classes.token,\n        disabled && classes.disabled,\n        selectable && !disabled && classes.selectable,\n        selected && !disabled && classes.selected,\n        selected && disabled && classes.disabledAndSelected,\n        highlight && selectable && !disabled && !selected && classes.highlight,\n        classNameProp\n      );\n    }\n\n    return (\n      <span\n        className={className}\n        dangerouslySetInnerHTML={{ __html: (text || '').replace(/\\n/g, '<br>') }}\n        data-indexkey={index}\n      />\n    );\n  }\n}\n\nexport default withStyles(theme => {\n  return {\n    token: {\n      cursor: 'pointer',\n      textIndent: 0,\n      padding: theme.spacing.unit / 2,\n      paddingRight: 0,\n      paddingLeft: 0,\n      transition: 'background-color 100ms ease-in'\n    },\n    disabled: {\n      cursor: 'inherit',\n      color: 'grey' // TODO hardcoded color\n    },\n    disabledBlack: {\n      cursor: 'inherit'\n    },\n    disabledAndSelected: {\n      backgroundColor: 'pink' // TODO hardcoded color\n    },\n    selectable: {\n      '&:hover': {\n        backgroundColor: color.primaryLight(),\n        '& > *': {\n          backgroundColor: color.primaryLight()\n        }\n      }\n    },\n    selected: {\n      lineHeight: 2,\n      marginTop: theme.spacing.unit / 2,\n      '&:hover': {\n        backgroundColor: color.primaryLight()\n      },\n      backgroundColor: color.primaryLight(),\n      '& > *': {\n        backgroundColor: color.primaryLight()\n      }\n    },\n    highlight: {\n      // TODO hardcoded color,\n      border: 'dashed 2px gray',\n      lineHeight: 2,\n      boxSizing: 'border-box',\n      marginTop: theme.spacing.unit / 2,\n      display: 'inline-block',\n      padding: theme.spacing.unit\n    },\n\n    custom: {\n      display: 'initial'\n    },\n    correct: {\n      backgroundColor: color.correct()\n    },\n    incorrect: {\n      backgroundColor: color.incorrect()\n    }\n  };\n})(Token);\n"],"file":"token.js"}
+{"version":3,"sources":["../../src/token-select/token.jsx"],"names":["TokenTypes","text","PropTypes","string","selectable","bool","Token","props","selected","classes","classNameProp","className","disabled","index","highlight","correct","animationsDisabled","undefined","token","disabledBlack","rootClassName","custom","incorrect","disabledAndSelected","print","__html","replace","React","Component","object","isRequired","theme","cursor","textIndent","padding","spacing","unit","paddingRight","paddingLeft","transition","color","backgroundColor","primaryLight","lineHeight","marginTop","border","boxSizing","display"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport { color } from '@pie-lib/render-ui';\n\nexport const TokenTypes = {\n  text: PropTypes.string,\n  selectable: PropTypes.bool\n};\n\nexport class Token extends React.Component {\n  static rootClassName = 'tokenRootClass';\n\n  static propTypes = {\n    ...TokenTypes,\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    disabled: PropTypes.bool,\n    highlight: PropTypes.bool,\n    correct: PropTypes.bool,\n    text: PropTypes.string.isRequired\n  };\n\n  static defaultProps = {\n    selectable: false,\n    text: ''\n  };\n\n  render() {\n    const {\n      text,\n      selectable,\n      selected,\n      classes,\n      className: classNameProp,\n      disabled,\n      index,\n      highlight,\n      correct,\n      animationsDisabled\n    } = this.props;\n\n    let className;\n\n    if (correct === undefined && selected && disabled) {\n      className = classNames(classes.token, classes.selected, classes.disabledBlack);\n    } else if (correct !== undefined) {\n      className = classNames(\n        Token.rootClassName,\n        classes.custom,\n        correct === true && classes.correct,\n        correct === false && classes.incorrect\n      );\n    } else {\n      className = classNames(\n        Token.rootClassName,\n        classes.token,\n        disabled && classes.disabled,\n        selectable && !disabled && classes.selectable,\n        selected && !disabled && classes.selected,\n        selected && disabled && classes.disabledAndSelected,\n        highlight && selectable && !disabled && !selected && classes.highlight,\n        animationsDisabled && classes.print,\n        classNameProp\n      );\n    }\n\n    return (\n      <span\n        className={className}\n        dangerouslySetInnerHTML={{ __html: (text || '').replace(/\\n/g, '<br>') }}\n        data-indexkey={index}\n      />\n    );\n  }\n}\n\nexport default withStyles(theme => {\n  return {\n    token: {\n      cursor: 'pointer',\n      textIndent: 0,\n      padding: theme.spacing.unit / 2,\n      paddingRight: 0,\n      paddingLeft: 0,\n      transition: 'background-color 100ms ease-in'\n    },\n    disabled: {\n      cursor: 'inherit',\n      color: 'grey' // TODO hardcoded color\n    },\n    disabledBlack: {\n      cursor: 'inherit'\n    },\n    disabledAndSelected: {\n      backgroundColor: 'pink' // TODO hardcoded color\n    },\n    selectable: {\n      '&:hover': {\n        backgroundColor: color.primaryLight(),\n        '& > *': {\n          backgroundColor: color.primaryLight()\n        }\n      }\n    },\n    selected: {\n      lineHeight: 2,\n      marginTop: theme.spacing.unit / 2,\n      '&:hover': {\n        backgroundColor: color.primaryLight()\n      },\n      backgroundColor: color.primaryLight(),\n      '& > *': {\n        backgroundColor: color.primaryLight()\n      }\n    },\n    highlight: {\n      // TODO hardcoded color,\n      border: 'dashed 2px gray',\n      lineHeight: 2,\n      boxSizing: 'border-box',\n      marginTop: theme.spacing.unit / 2,\n      display: 'inline-block',\n      padding: theme.spacing.unit\n    },\n    print: {\n      border: 'dashed 2px gray',\n      lineHeight: 2,\n      boxSizing: 'border-box',\n      marginTop: theme.spacing.unit / 2,\n      display: 'inline-block',\n      padding: theme.spacing.unit,\n      color: color.text()\n    },\n\n    custom: {\n      display: 'initial'\n    },\n    correct: {\n      backgroundColor: color.correct()\n    },\n    incorrect: {\n      backgroundColor: color.incorrect()\n    }\n  };\n})(Token);\n"],"file":"token.js"}

package/lib/tokenizer/selection-utils.js

@@ -50,7 +50,7 @@ var getCaretCharacterOffsetWithin = function getCaretCharacterOffsetWithin(eleme
         caretOffset = preCaretRange.toString().length;
       }
     }
-  } else if ((sel = doc.selection) && sel.type != 'Control') {
+  } else if ((sel = doc.selection) && sel.type !== 'Control') {
     var textRange = sel.createRange();
     var preCaretTextRange = doc.body.createTextRange();
     preCaretTextRange.moveToElementText(element);

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

@@ -1 +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,CAAAC,OAAO,EAAI;AACtD,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,IAAY,SAAzC,EAAoD;AACzD,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"}
+{"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,CAAAC,OAAO,EAAI;AACtD,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

@@ -85,6 +85,7 @@ var Text = (0, _styles.withStyles)(function () {
   }
 });
 exports.Text = Text;
+var notAllowedCharacters = ['\n', ' ', '\t'];
 
 var TokenText =
 /*#__PURE__*/
@@ -104,12 +105,12 @@ function (_React$Component) {
 
     _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(TokenText)).call.apply(_getPrototypeOf2, [this].concat(args)));
 
-    _defineProperty(_assertThisInitialized(_this), "mouseUp", function (event) {
-      event.preventDefault();
+    _defineProperty(_assertThisInitialized(_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;
@@ -118,9 +119,19 @@ function (_React$Component) {
       var selection = window.getSelection();
       var textSelected = selection.toString();
 
-      if (textSelected.length > 0) {
+      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;
@@ -169,7 +180,7 @@ function (_React$Component) {
         ref: function ref(r) {
           return _this2.root = r;
         },
-        onMouseUp: this.mouseUp
+        onClick: this.onClick
       }, normalized.map(function (t, index) {
         return _react["default"].createElement(Text, _extends({
           key: index

package/lib/tokenizer/token-text.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tokenizer/token-text.jsx"],"names":["log","Text","predefined","cursor","backgroundColor","yellow","border","correct","green","text","classes","onClick","formattedText","replace","className","__html","TokenText","event","preventDefault","props","onSelectToken","tokens","window","selection","getSelection","textSelected","toString","length","root","offset","undefined","endIndex","i","start","end","hasOverlap","tokensToRemove","surroundedTokens","token","onTokenClick","normalized","r","mouseUp","map","t","index","React","Component","PropTypes","string","isRequired","array","func"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,GAAG,GAAG,uBAAM,iCAAN,CAAZ;AAEO,IAAMC,IAAI,GAAG,wBAAW;AAAA,SAAO;AACpCC,IAAAA,UAAU,EAAE;AACVC,MAAAA,MAAM,EAAE,SADE;AAEVC,MAAAA,eAAe,EAAEC,mBAAO,GAAP,CAFP;AAGVC,MAAAA,MAAM,uBAAgBD,mBAAO,GAAP,CAAhB;AAHI,KADwB;AAMpCE,IAAAA,OAAO,EAAE;AACPH,MAAAA,eAAe,EAAEI,kBAAM,GAAN;AADV;AAN2B,GAAP;AAAA,CAAX,EAShB,gBAAqD;AAAA,MAAlDC,IAAkD,QAAlDA,IAAkD;AAAA,MAA5CP,UAA4C,QAA5CA,UAA4C;AAAA,MAAhCQ,OAAgC,QAAhCA,OAAgC;AAAA,MAAvBC,OAAuB,QAAvBA,OAAuB;AAAA,MAAdJ,OAAc,QAAdA,OAAc;AACvD,MAAMK,aAAa,GAAG,CAACH,IAAI,IAAI,EAAT,EAAaI,OAAb,CAAqB,KAArB,EAA4B,MAA5B,CAAtB;;AAEA,MAAIX,UAAJ,EAAgB;AACd,QAAMY,SAAS,GAAG,4BAAWJ,OAAO,CAACR,UAAnB,EAA+BK,OAAO,IAAIG,OAAO,CAACH,OAAlD,CAAlB;AAEA,WACE;AACE,MAAA,OAAO,EAAEI,OADX;AAEE,MAAA,SAAS,EAAEG,SAFb;AAGE,MAAA,uBAAuB,EAAE;AAAEC,QAAAA,MAAM,EAAEH;AAAV;AAH3B,MADF;AAOD,GAVD,MAUO;AACL,WAAO;AAAM,MAAA,uBAAuB,EAAE;AAAEG,QAAAA,MAAM,EAAEH;AAAV;AAA/B,MAAP;AACD;AACF,CAzBmB,CAAb;;;IA2BcI,S;;;;;;;;;;;;;;;;;;8DAST,UAAAC,KAAK,EAAI;AACjBA,MAAAA,KAAK,CAACC,cAAN;AADiB,wBAEuB,MAAKC,KAF5B;AAAA,UAETC,aAFS,eAETA,aAFS;AAAA,UAEMX,IAFN,eAEMA,IAFN;AAAA,UAEYY,MAFZ,eAEYA,MAFZ;;AAIjB,UAAI,OAAOC,MAAP,KAAkB,WAAtB,EAAmC;AACjC;AACD;;AAED,UAAMC,SAAS,GAAGD,MAAM,CAACE,YAAP,EAAlB;AACA,UAAMC,YAAY,GAAGF,SAAS,CAACG,QAAV,EAArB;;AAEA,UAAID,YAAY,CAACE,MAAb,GAAsB,CAA1B,EAA6B;AAC3B,YAAI,MAAKC,IAAT,EAAe;AACb,cAAMC,MAAM,GAAG,mDAA8B,MAAKD,IAAnC,CAAf;;AACA,cAAIC,MAAM,KAAKC,SAAf,EAA0B;AACxB,gBAAMC,QAAQ,GAAGF,MAAM,GAAGJ,YAAY,CAACE,MAAvC;;AAEA,gBAAII,QAAQ,IAAItB,IAAI,CAACkB,MAArB,EAA6B;AAC3B,kBAAMK,CAAC,GAAG,2BAAa;AAAEC,gBAAAA,KAAK,EAAEJ,MAAT;AAAiBK,gBAAAA,GAAG,EAAEH;AAAtB,eAAb,EAA+CV,MAA/C,CAAV;;AACA,kBAAIW,CAAC,CAACG,UAAN,EAAkB;AAChBnC,gBAAAA,GAAG,CAAC,0BAAD,CAAH;AACA;AACD,eAHD,MAGO;AACL,oBAAMoC,cAAc,GAAGJ,CAAC,CAACK,gBAAzB;AACA,oBAAMC,KAAK,GAAG;AACZ7B,kBAAAA,IAAI,EAAEgB,YADM;AAEZQ,kBAAAA,KAAK,EAAEJ,MAFK;AAGZK,kBAAAA,GAAG,EAAEH;AAHO,iBAAd;AAMAX,gBAAAA,aAAa,CAACkB,KAAD,EAAQF,cAAR,CAAb;AACA;AACD;AACF;AACF;AACF;AACF;AACF,K;;;;;;;6BAEQ;AAAA;;AAAA,yBAC2C,KAAKjB,KADhD;AAAA,UACCV,IADD,gBACCA,IADD;AAAA,UACOY,MADP,gBACOA,MADP;AAAA,UACeP,SADf,gBACeA,SADf;AAAA,UAC0ByB,YAD1B,gBAC0BA,YAD1B;AAGP,UAAMC,UAAU,GAAG,wBAAU/B,IAAV,EAAgBY,MAAhB,CAAnB;AAEA,aACE;AAAK,QAAA,SAAS,EAAEP,SAAhB;AAA2B,QAAA,GAAG,EAAE,aAAA2B,CAAC;AAAA,iBAAK,MAAI,CAACb,IAAL,GAAYa,CAAjB;AAAA,SAAjC;AAAsD,QAAA,SAAS,EAAE,KAAKC;AAAtE,SACGF,UAAU,CAACG,GAAX,CAAe,UAACC,CAAD,EAAIC,KAAJ,EAAc;AAC5B,eAAO,gCAAC,IAAD;AAAM,UAAA,GAAG,EAAEA;AAAX,WAAsBD,CAAtB;AAAyB,UAAA,OAAO,EAAE;AAAA,mBAAML,YAAY,CAACK,CAAD,CAAlB;AAAA;AAAlC,WAAP;AACD,OAFA,CADH,CADF;AAOD;;;;EA5DoCE,kBAAMC,S;;;;gBAAxB/B,S,eACA;AACjBP,EAAAA,IAAI,EAAEuC,sBAAUC,MAAV,CAAiBC,UADN;AAEjB7B,EAAAA,MAAM,EAAE2B,sBAAUG,KAAV,CAAgBD,UAFP;AAGjBX,EAAAA,YAAY,EAAES,sBAAUI,IAAV,CAAeF,UAHZ;AAIjB9B,EAAAA,aAAa,EAAE4B,sBAAUI,IAAV,CAAeF,UAJb;AAKjBpC,EAAAA,SAAS,EAAEkC,sBAAUC;AALJ,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { normalize, intersection } from './builder';\nimport yellow from '@material-ui/core/colors/yellow';\nimport green from '@material-ui/core/colors/green';\nimport debug from 'debug';\nimport classNames from 'classnames';\n\nimport { clearSelection, getCaretCharacterOffsetWithin } from './selection-utils';\n\nconst log = debug('@pie-lib:text-select:token-text');\n\nexport const Text = withStyles(() => ({\n  predefined: {\n    cursor: 'pointer',\n    backgroundColor: yellow[100],\n    border: `dashed 0px ${yellow[700]}`\n  },\n  correct: {\n    backgroundColor: green[500]\n  }\n}))(({ text, predefined, classes, onClick, correct }) => {\n  const formattedText = (text || '').replace(/\\n/g, '<br>');\n\n  if (predefined) {\n    const className = classNames(classes.predefined, correct && classes.correct);\n\n    return (\n      <span\n        onClick={onClick}\n        className={className}\n        dangerouslySetInnerHTML={{ __html: formattedText }}\n      />\n    );\n  } else {\n    return <span dangerouslySetInnerHTML={{ __html: formattedText }} />;\n  }\n});\n\nexport default class TokenText extends React.Component {\n  static propTypes = {\n    text: PropTypes.string.isRequired,\n    tokens: PropTypes.array.isRequired,\n    onTokenClick: PropTypes.func.isRequired,\n    onSelectToken: PropTypes.func.isRequired,\n    className: PropTypes.string\n  };\n\n  mouseUp = event => {\n    event.preventDefault();\n    const { onSelectToken, text, tokens } = this.props;\n\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    const selection = window.getSelection();\n    const textSelected = selection.toString();\n\n    if (textSelected.length > 0) {\n      if (this.root) {\n        const offset = getCaretCharacterOffsetWithin(this.root);\n        if (offset !== undefined) {\n          const endIndex = offset + textSelected.length;\n\n          if (endIndex <= text.length) {\n            const i = intersection({ start: offset, end: endIndex }, tokens);\n            if (i.hasOverlap) {\n              log('hasOverlap  - do nothing');\n              clearSelection();\n            } else {\n              const tokensToRemove = i.surroundedTokens;\n              const token = {\n                text: textSelected,\n                start: offset,\n                end: endIndex\n              };\n\n              onSelectToken(token, tokensToRemove);\n              clearSelection();\n            }\n          }\n        }\n      }\n    }\n  };\n\n  render() {\n    const { text, tokens, className, onTokenClick } = this.props;\n\n    const normalized = normalize(text, tokens);\n\n    return (\n      <div className={className} ref={r => (this.root = r)} onMouseUp={this.mouseUp}>\n        {normalized.map((t, index) => {\n          return <Text key={index} {...t} onClick={() => onTokenClick(t)} />;\n        })}\n      </div>\n    );\n  }\n}\n"],"file":"token-text.js"}
+{"version":3,"sources":["../../src/tokenizer/token-text.jsx"],"names":["log","Text","predefined","cursor","backgroundColor","yellow","border","correct","green","text","classes","onClick","formattedText","replace","className","__html","notAllowedCharacters","TokenText","event","props","onSelectToken","tokens","preventDefault","window","selection","getSelection","textSelected","toString","length","indexOf","root","offset","newLineOffset","slice","undefined","endIndex","i","start","end","hasOverlap","tokensToRemove","surroundedTokens","token","onTokenClick","normalized","r","map","t","index","React","Component","PropTypes","string","isRequired","array","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { normalize, intersection } from './builder';\nimport yellow from '@material-ui/core/colors/yellow';\nimport green from '@material-ui/core/colors/green';\nimport debug from 'debug';\nimport classNames from 'classnames';\n\nimport { clearSelection, getCaretCharacterOffsetWithin } from './selection-utils';\n\nconst log = debug('@pie-lib:text-select:token-text');\n\nexport const Text = withStyles(() => ({\n  predefined: {\n    cursor: 'pointer',\n    backgroundColor: yellow[100],\n    border: `dashed 0px ${yellow[700]}`\n  },\n  correct: {\n    backgroundColor: green[500]\n  }\n}))(({ text, predefined, classes, onClick, correct }) => {\n  const formattedText = (text || '').replace(/\\n/g, '<br>');\n\n  if (predefined) {\n    const className = classNames(classes.predefined, correct && classes.correct);\n\n    return (\n      <span\n        onClick={onClick}\n        className={className}\n        dangerouslySetInnerHTML={{ __html: formattedText }}\n      />\n    );\n  } else {\n    return <span dangerouslySetInnerHTML={{ __html: formattedText }} />;\n  }\n});\n\nconst notAllowedCharacters = ['\\n', ' ', '\\t'];\n\nexport default class TokenText extends React.Component {\n  static propTypes = {\n    text: PropTypes.string.isRequired,\n    tokens: PropTypes.array.isRequired,\n    onTokenClick: PropTypes.func.isRequired,\n    onSelectToken: PropTypes.func.isRequired,\n    className: PropTypes.string\n  };\n\n  /*\n   Change this to onClick instead of mouseUp because previously, in some cases\n   the onClick event from the <Text /> component was called right after the user\n   selected token and that token was then removed because the setCorrectMode was not true.\n\n   const { setCorrectMode } = this.state;\n\n   if (setCorrectMode) {\n   this.setCorrect(token);\n   } else {\n   this.removeToken(token);\n   }\n   */\n  onClick = event => {\n    const { onSelectToken, text, tokens } = this.props;\n\n    event.preventDefault();\n\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    const selection = window.getSelection();\n    const textSelected = selection.toString();\n\n    if (textSelected.length > 0 && notAllowedCharacters.indexOf(textSelected) < 0) {\n      if (this.root) {\n        let offset = getCaretCharacterOffsetWithin(this.root);\n        /*\n         Since we implemented new line functionality (\\n) using <br /> dom elements\n         and window.getSelection is not taking that into consideration, the offset might\n         be off by a few characters.\n\n         To combat that, we check if the selected text is right at the beginning of the offset.\n\n         If it's not, we add the additional offset in order for that to be accurate\n         */\n        const newLineOffset = text.slice(offset).indexOf(textSelected);\n\n        offset += newLineOffset;\n\n        if (offset !== undefined) {\n          const endIndex = offset + textSelected.length;\n\n          if (endIndex <= text.length) {\n            const i = intersection({ start: offset, end: endIndex }, tokens);\n            if (i.hasOverlap) {\n              log('hasOverlap  - do nothing');\n              clearSelection();\n            } else {\n              const tokensToRemove = i.surroundedTokens;\n              const token = {\n                text: textSelected,\n                start: offset,\n                end: endIndex\n              };\n\n              onSelectToken(token, tokensToRemove);\n              clearSelection();\n            }\n          }\n        }\n      }\n    }\n  };\n\n  render() {\n    const { text, tokens, className, onTokenClick } = this.props;\n    const normalized = normalize(text, tokens);\n\n    return (\n      <div className={className} ref={r => (this.root = r)} onClick={this.onClick}>\n        {normalized.map((t, index) => {\n          return <Text key={index} {...t} onClick={() => onTokenClick(t)} />;\n        })}\n      </div>\n    );\n  }\n}\n"],"file":"token-text.js"}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.8.5",
+  "version": "1.8.6-next.122+dba4534e",
   "description": "Some react components for text selection",
   "keywords": [
     "react",
@@ -38,6 +38,6 @@
     "@material-ui/core": "^3.8.3",
     "react": "^16.8.1"
   },
-  "gitHead": "de37d3ba44d3e7934e2f804381fe50d2da16a29a",
+  "gitHead": "dba4534e24ec71a69ac1d71b55ac3e8a107c6f39",
   "scripts": {}
 }

package/src/text-select.jsx

@@ -18,6 +18,7 @@ export default class TextSelect extends React.Component {
     text: PropTypes.string.isRequired,
     className: PropTypes.string,
     highlightChoices: PropTypes.bool,
+    animationsDisabled: PropTypes.bool,
     maxNoOfSelections: PropTypes.number
   };
 
@@ -40,7 +41,8 @@ export default class TextSelect extends React.Component {
       selectedTokens,
       className,
       highlightChoices,
-      maxNoOfSelections
+      maxNoOfSelections,
+      animationsDisabled
     } = this.props;
 
     const normalized = normalize(text, tokens);
@@ -67,6 +69,7 @@ export default class TextSelect extends React.Component {
         disabled={disabled}
         onChange={this.change}
         maxNoOfSelections={maxNoOfSelections}
+        animationsDisabled={animationsDisabled}
       />
     );
   }

package/src/token-select/index.jsx

@@ -19,6 +19,7 @@ export class TokenSelect extends React.Component {
     onChange: PropTypes.func.isRequired,
     disabled: PropTypes.bool,
     highlightChoices: PropTypes.bool,
+    animationsDisabled: PropTypes.bool,
     maxNoOfSelections: PropTypes.number
   };
 
@@ -53,14 +54,14 @@ export class TokenSelect extends React.Component {
    */
   toggleToken = event => {
     const { target } = event;
-    const { tokens } = this.props;
+    const { tokens, animationsDisabled } = this.props;
     const tokensCloned = clone(tokens);
     const targetSpanWrapper = target.closest(`.${Token.rootClassName}`);
     const targetedTokenIndex =
       targetSpanWrapper && targetSpanWrapper.dataset && targetSpanWrapper.dataset.indexkey;
     const t = targetedTokenIndex && tokensCloned[targetedTokenIndex];
 
-    if (t && t.correct === undefined) {
+    if (t && t.correct === undefined && !animationsDisabled) {
       const { onChange, maxNoOfSelections } = this.props;
       const selected = !t.selected;
 
@@ -94,7 +95,7 @@ export class TokenSelect extends React.Component {
   };
 
   generateTokensInHtml = () => {
-    const { tokens, disabled, highlightChoices } = this.props;
+    const { tokens, disabled, highlightChoices, animationsDisabled } = this.props;
     const selectedCount = this.selectedCount();
     const isLineBreak = text => text === '\n';
     const isNewParagraph = text => text === '\n\n';
@@ -112,8 +113,12 @@ export class TokenSelect extends React.Component {
         return finalAcc + '<br>';
       }
 
-      //modified (selectable && !disabled) to !disabled to fix PD-646
-      if (!disabled || showCorrectAnswer || t.selected) {
+      if (
+        (selectable && !disabled) ||
+        showCorrectAnswer ||
+        t.selected ||
+        (animationsDisabled && t.predefined) // if we are in print mode
+      ) {
         return (
           finalAcc +
           renderToString(
@@ -124,6 +129,7 @@ export class TokenSelect extends React.Component {
               {...t}
               selectable={selectable}
               highlight={highlightChoices}
+              animationsDisabled={animationsDisabled}
             />
           )
         );

package/src/token-select/token.jsx

@@ -37,7 +37,8 @@ export class Token extends React.Component {
       disabled,
       index,
       highlight,
-      correct
+      correct,
+      animationsDisabled
     } = this.props;
 
     let className;
@@ -60,6 +61,7 @@ export class Token extends React.Component {
         selected && !disabled && classes.selected,
         selected && disabled && classes.disabledAndSelected,
         highlight && selectable && !disabled && !selected && classes.highlight,
+        animationsDisabled && classes.print,
         classNameProp
       );
     }
@@ -122,6 +124,15 @@ export default withStyles(theme => {
       display: 'inline-block',
       padding: theme.spacing.unit
     },
+    print: {
+      border: 'dashed 2px gray',
+      lineHeight: 2,
+      boxSizing: 'border-box',
+      marginTop: theme.spacing.unit / 2,
+      display: 'inline-block',
+      padding: theme.spacing.unit,
+      color: color.text()
+    },
 
     custom: {
       display: 'initial'

package/src/tokenizer/selection-utils.js

@@ -38,7 +38,7 @@ export const getCaretCharacterOffsetWithin = element => {
         caretOffset = preCaretRange.toString().length;
       }
     }
-  } else if ((sel = doc.selection) && sel.type != 'Control') {
+  } else if ((sel = doc.selection) && sel.type !== 'Control') {
     var textRange = sel.createRange();
     var preCaretTextRange = doc.body.createTextRange();
     preCaretTextRange.moveToElementText(element);

package/src/tokenizer/token-text.jsx

@@ -38,6 +38,8 @@ export const Text = withStyles(() => ({
   }
 });
 
+const notAllowedCharacters = ['\n', ' ', '\t'];
+
 export default class TokenText extends React.Component {
   static propTypes = {
     text: PropTypes.string.isRequired,
@@ -47,10 +49,24 @@ export default class TokenText extends React.Component {
     className: PropTypes.string
   };
 
-  mouseUp = event => {
-    event.preventDefault();
+  /*
+   Change this to onClick instead of mouseUp because previously, in some cases
+   the onClick event from the <Text /> component was called right after the user
+   selected token and that token was then removed because the setCorrectMode was not true.
+
+   const { setCorrectMode } = this.state;
+
+   if (setCorrectMode) {
+   this.setCorrect(token);
+   } else {
+   this.removeToken(token);
+   }
+   */
+  onClick = event => {
     const { onSelectToken, text, tokens } = this.props;
 
+    event.preventDefault();
+
     if (typeof window === 'undefined') {
       return;
     }
@@ -58,9 +74,22 @@ export default class TokenText extends React.Component {
     const selection = window.getSelection();
     const textSelected = selection.toString();
 
-    if (textSelected.length > 0) {
+    if (textSelected.length > 0 && notAllowedCharacters.indexOf(textSelected) < 0) {
       if (this.root) {
-        const offset = getCaretCharacterOffsetWithin(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;
 
@@ -88,11 +117,10 @@ export default class TokenText extends React.Component {
 
   render() {
     const { text, tokens, className, onTokenClick } = this.props;
-
     const normalized = normalize(text, tokens);
 
     return (
-      <div className={className} ref={r => (this.root = r)} onMouseUp={this.mouseUp}>
+      <div className={className} ref={r => (this.root = r)} onClick={this.onClick}>
         {normalized.map((t, index) => {
           return <Text key={index} {...t} onClick={() => onTokenClick(t)} />;
         })}