@pie-lib/text-select 1.8.7 → 1.8.11

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

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.8.11](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.8.10...@pie-lib/text-select@1.8.11) (2021-12-13)
+
+**Note:** Version bump only for package @pie-lib/text-select
+
+
+
+
+
+## [1.8.10](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.8.9...@pie-lib/text-select@1.8.10) (2021-11-29)
+
+**Note:** Version bump only for package @pie-lib/text-select
+
+
+
+
+
+## [1.8.9](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.8.8...@pie-lib/text-select@1.8.9) (2021-11-10)
+
+**Note:** Version bump only for package @pie-lib/text-select
+
+
+
+
+
+## [1.8.8](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.8.7...@pie-lib/text-select@1.8.8) (2021-10-04)
+
+
+### Bug Fixes
+
+* **select-text:** made sure the new line characters are taken into consideration for offsets [PD-1145] ([a7bb44a](https://github.com/pie-framework/pie-lib/commit/a7bb44a))
+
+
+
+
+
 ## [1.8.7](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.8.6...@pie-lib/text-select@1.8.7) (2021-09-08)
 
 **Note:** Version bump only for package @pie-lib/text-select

package/lib/token-select/index.js

@@ -172,10 +172,9 @@ function (_React$Component) {
 
         if (isLineBreak(t.text)) {
           return finalAcc + '<br>';
-        } //modified (selectable && !disabled) to !disabled to fix PD-646
-
+        }
 
-        if (!disabled || showCorrectAnswer || t.selected) {
+        if (selectable && !disabled || showCorrectAnswer || t.selected) {
           return finalAcc + (0, _server.renderToString)(_react["default"].createElement(_token["default"], _extends({
             key: index,
             disabled: disabled,

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":"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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    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","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":"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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    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      if ((selectable && !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"}

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;
@@ -141,13 +152,6 @@ function (_React$Component) {
                   start: offset,
                   end: endIndex
                 };
-                var newLineOffset = (text.slice(0, token.start).match(/\n/g) || '').length;
-
-                if (newLineOffset > 0) {
-                  token.start += newLineOffset;
-                  token.end += newLineOffset;
-                }
-
                 onSelectToken(token, tokensToRemove);
                 (0, _selectionUtils.clearSelection)();
               }
@@ -176,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","newLineOffset","slice","match","onTokenClick","normalized","r","mouseUp","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\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              const newLineOffset = (text.slice(0, token.start).match(/\\n/g) || '').length;\n\n              if (newLineOffset > 0) {\n                token.start += newLineOffset;\n                token.end += newLineOffset;\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.7",
+  "version": "1.8.11",
   "description": "Some react components for text selection",
   "keywords": [
     "react",
@@ -18,7 +18,7 @@
   "license": "ISC",
   "dependencies": {
     "@pie-framework/parse-english": "^1.0.0",
-    "@pie-lib/render-ui": "^4.12.2",
+    "@pie-lib/render-ui": "^4.12.4",
     "@pie-lib/style-utils": "^0.1.25",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
@@ -38,6 +38,6 @@
     "@material-ui/core": "^3.8.3",
     "react": "^16.8.1"
   },
-  "gitHead": "b609e48dad31311311511a3033340db24c2808bd",
+  "gitHead": "0fa7d2eea7cc8d058c396cbb3b74adaaf924b2fe",
   "scripts": {}
 }

package/src/token-select/index.jsx

@@ -112,8 +112,7 @@ 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) {
         return (
           finalAcc +
           renderToString(

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;
 
@@ -76,12 +105,6 @@ export default class TokenText extends React.Component {
                 start: offset,
                 end: endIndex
               };
-              const newLineOffset = (text.slice(0, token.start).match(/\n/g) || '').length;
-
-              if (newLineOffset > 0) {
-                token.start += newLineOffset;
-                token.end += newLineOffset;
-              }
 
               onSelectToken(token, tokensToRemove);
               clearSelection();
@@ -94,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)} />;
         })}