@pie-lib/text-select 1.32.1 → 1.33.0-mui-update.0

package/lib/utils.js

@@ -4,64 +4,48 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.prepareText = exports.parseParagraphs = exports.parseParagraph = exports.parseBrs = void 0;
-
 var createElementFromHTML = function createElementFromHTML() {
   var htmlString = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var div = document.createElement('div');
   div.innerHTML = htmlString.trim();
   return div;
 };
-
-var parseBrs = function parseBrs(dom) {
+var parseBrs = exports.parseBrs = function parseBrs(dom) {
   var brs = dom.querySelectorAll('br');
   brs.forEach(function (br) {
     return br.replaceWith('\n');
   });
   dom.innerHTML = dom.innerHTML.replace(/\n\n/g, '\n');
 };
-
-exports.parseBrs = parseBrs;
-
-var parseParagraph = function parseParagraph(paragraph, end) {
+var parseParagraph = exports.parseParagraph = function parseParagraph(paragraph, end) {
   if (end) {
     return paragraph.innerHTML;
   }
-
   return "".concat(paragraph.innerHTML, "\n\n");
 };
-
-exports.parseParagraph = parseParagraph;
-
-var parseParagraphs = function parseParagraphs(dom) {
-  var paragraphs = dom.querySelectorAll('p'); // separate variable for easily debugging, if needed
-
+var parseParagraphs = exports.parseParagraphs = function parseParagraphs(dom) {
+  var paragraphs = dom.querySelectorAll('p');
+  // separate variable for easily debugging, if needed
   var str = '';
   paragraphs.forEach(function (par, index) {
     str += parseParagraph(par, index === paragraphs.length - 1);
   });
   return str || null;
 };
-
-exports.parseParagraphs = parseParagraphs;
-
-var prepareText = function prepareText(text) {
+var prepareText = exports.prepareText = function prepareText(text) {
   var txtDom = createElementFromHTML(text);
   var allDomElements = Array.from(txtDom.querySelectorAll('*'));
-
   if (txtDom.querySelectorAll('p').length === 0) {
     var div = document.createElement('div');
     div.innerHTML = "<p>".concat(txtDom.innerHTML, "</p>");
     txtDom = div;
-  } // if no dom elements, we just return the text
-
+  }
 
+  // if no dom elements, we just return the text
   if (allDomElements.length === 0) {
     return text;
   }
-
   parseBrs(txtDom);
   return parseParagraphs(txtDom);
 };
-
-exports.prepareText = prepareText;
 //# sourceMappingURL=utils.js.map

package/lib/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils.js"],"names":["createElementFromHTML","htmlString","div","document","createElement","innerHTML","trim","parseBrs","dom","brs","querySelectorAll","forEach","br","replaceWith","replace","parseParagraph","paragraph","end","parseParagraphs","paragraphs","str","par","index","length","prepareText","text","txtDom","allDomElements","Array","from"],"mappings":";;;;;;;AAAA,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAwB,GAAqB;AAAA,MAApBC,UAAoB,uEAAP,EAAO;AACjD,MAAMC,GAAG,GAAGC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAZ;AAEAF,EAAAA,GAAG,CAACG,SAAJ,GAAgBJ,UAAU,CAACK,IAAX,EAAhB;AAEA,SAAOJ,GAAP;AACD,CAND;;AAQO,IAAMK,QAAQ,GAAG,SAAXA,QAAW,CAACC,GAAD,EAAS;AAC/B,MAAMC,GAAG,GAAGD,GAAG,CAACE,gBAAJ,CAAqB,IAArB,CAAZ;AAEAD,EAAAA,GAAG,CAACE,OAAJ,CAAY,UAACC,EAAD;AAAA,WAAQA,EAAE,CAACC,WAAH,CAAe,IAAf,CAAR;AAAA,GAAZ;AAEAL,EAAAA,GAAG,CAACH,SAAJ,GAAgBG,GAAG,CAACH,SAAJ,CAAcS,OAAd,CAAsB,OAAtB,EAA+B,IAA/B,CAAhB;AACD,CANM;;;;AAQA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,SAAD,EAAYC,GAAZ,EAAoB;AAChD,MAAIA,GAAJ,EAAS;AACP,WAAOD,SAAS,CAACX,SAAjB;AACD;;AAED,mBAAUW,SAAS,CAACX,SAApB;AACD,CANM;;;;AAQA,IAAMa,eAAe,GAAG,SAAlBA,eAAkB,CAACV,GAAD,EAAS;AACtC,MAAMW,UAAU,GAAGX,GAAG,CAACE,gBAAJ,CAAqB,GAArB,CAAnB,CADsC,CAEtC;;AACA,MAAIU,GAAG,GAAG,EAAV;AAEAD,EAAAA,UAAU,CAACR,OAAX,CAAmB,UAACU,GAAD,EAAMC,KAAN,EAAgB;AACjCF,IAAAA,GAAG,IAAIL,cAAc,CAACM,GAAD,EAAMC,KAAK,KAAKH,UAAU,CAACI,MAAX,GAAoB,CAApC,CAArB;AACD,GAFD;AAIA,SAAOH,GAAG,IAAI,IAAd;AACD,CAVM;;;;AAYA,IAAMI,WAAW,GAAG,SAAdA,WAAc,CAACC,IAAD,EAAU;AACnC,MAAIC,MAAM,GAAG1B,qBAAqB,CAACyB,IAAD,CAAlC;AACA,MAAME,cAAc,GAAGC,KAAK,CAACC,IAAN,CAAWH,MAAM,CAAChB,gBAAP,CAAwB,GAAxB,CAAX,CAAvB;;AAEA,MAAIgB,MAAM,CAAChB,gBAAP,CAAwB,GAAxB,EAA6Ba,MAA7B,KAAwC,CAA5C,EAA+C;AAC7C,QAAMrB,GAAG,GAAGC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAZ;AAEAF,IAAAA,GAAG,CAACG,SAAJ,gBAAsBqB,MAAM,CAACrB,SAA7B;AACAqB,IAAAA,MAAM,GAAGxB,GAAT;AACD,GATkC,CAWnC;;;AACA,MAAIyB,cAAc,CAACJ,MAAf,KAA0B,CAA9B,EAAiC;AAC/B,WAAOE,IAAP;AACD;;AAEDlB,EAAAA,QAAQ,CAACmB,MAAD,CAAR;AAEA,SAAOR,eAAe,CAACQ,MAAD,CAAtB;AACD,CAnBM","sourcesContent":["const createElementFromHTML = (htmlString = '') => {\n  const div = document.createElement('div');\n\n  div.innerHTML = htmlString.trim();\n\n  return div;\n};\n\nexport const parseBrs = (dom) => {\n  const brs = dom.querySelectorAll('br');\n\n  brs.forEach((br) => br.replaceWith('\\n'));\n\n  dom.innerHTML = dom.innerHTML.replace(/\\n\\n/g, '\\n');\n};\n\nexport const parseParagraph = (paragraph, end) => {\n  if (end) {\n    return paragraph.innerHTML;\n  }\n\n  return `${paragraph.innerHTML}\\n\\n`;\n};\n\nexport const parseParagraphs = (dom) => {\n  const paragraphs = dom.querySelectorAll('p');\n  // separate variable for easily debugging, if needed\n  let str = '';\n\n  paragraphs.forEach((par, index) => {\n    str += parseParagraph(par, index === paragraphs.length - 1);\n  });\n\n  return str || null;\n};\n\nexport const prepareText = (text) => {\n  let txtDom = createElementFromHTML(text);\n  const allDomElements = Array.from(txtDom.querySelectorAll('*'));\n\n  if (txtDom.querySelectorAll('p').length === 0) {\n    const div = document.createElement('div');\n\n    div.innerHTML = `<p>${txtDom.innerHTML}</p>`;\n    txtDom = div;\n  }\n\n  // if no dom elements, we just return the text\n  if (allDomElements.length === 0) {\n    return text;\n  }\n\n  parseBrs(txtDom);\n\n  return parseParagraphs(txtDom);\n};\n"],"file":"utils.js"}
+{"version":3,"file":"utils.js","names":["createElementFromHTML","htmlString","arguments","length","undefined","div","document","createElement","innerHTML","trim","parseBrs","exports","dom","brs","querySelectorAll","forEach","br","replaceWith","replace","parseParagraph","paragraph","end","concat","parseParagraphs","paragraphs","str","par","index","prepareText","text","txtDom","allDomElements","Array","from"],"sources":["../src/utils.js"],"sourcesContent":["const createElementFromHTML = (htmlString = '') => {\n  const div = document.createElement('div');\n\n  div.innerHTML = htmlString.trim();\n\n  return div;\n};\n\nexport const parseBrs = (dom) => {\n  const brs = dom.querySelectorAll('br');\n\n  brs.forEach((br) => br.replaceWith('\\n'));\n\n  dom.innerHTML = dom.innerHTML.replace(/\\n\\n/g, '\\n');\n};\n\nexport const parseParagraph = (paragraph, end) => {\n  if (end) {\n    return paragraph.innerHTML;\n  }\n\n  return `${paragraph.innerHTML}\\n\\n`;\n};\n\nexport const parseParagraphs = (dom) => {\n  const paragraphs = dom.querySelectorAll('p');\n  // separate variable for easily debugging, if needed\n  let str = '';\n\n  paragraphs.forEach((par, index) => {\n    str += parseParagraph(par, index === paragraphs.length - 1);\n  });\n\n  return str || null;\n};\n\nexport const prepareText = (text) => {\n  let txtDom = createElementFromHTML(text);\n  const allDomElements = Array.from(txtDom.querySelectorAll('*'));\n\n  if (txtDom.querySelectorAll('p').length === 0) {\n    const div = document.createElement('div');\n\n    div.innerHTML = `<p>${txtDom.innerHTML}</p>`;\n    txtDom = div;\n  }\n\n  // if no dom elements, we just return the text\n  if (allDomElements.length === 0) {\n    return text;\n  }\n\n  parseBrs(txtDom);\n\n  return parseParagraphs(txtDom);\n};\n"],"mappings":";;;;;;AAAA,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAqBA,CAAA,EAAwB;EAAA,IAApBC,UAAU,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,EAAE;EAC5C,IAAMG,GAAG,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAEzCF,GAAG,CAACG,SAAS,GAAGP,UAAU,CAACQ,IAAI,CAAC,CAAC;EAEjC,OAAOJ,GAAG;AACZ,CAAC;AAEM,IAAMK,QAAQ,GAAAC,OAAA,CAAAD,QAAA,GAAG,SAAXA,QAAQA,CAAIE,GAAG,EAAK;EAC/B,IAAMC,GAAG,GAAGD,GAAG,CAACE,gBAAgB,CAAC,IAAI,CAAC;EAEtCD,GAAG,CAACE,OAAO,CAAC,UAACC,EAAE;IAAA,OAAKA,EAAE,CAACC,WAAW,CAAC,IAAI,CAAC;EAAA,EAAC;EAEzCL,GAAG,CAACJ,SAAS,GAAGI,GAAG,CAACJ,SAAS,CAACU,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC;AACtD,CAAC;AAEM,IAAMC,cAAc,GAAAR,OAAA,CAAAQ,cAAA,GAAG,SAAjBA,cAAcA,CAAIC,SAAS,EAAEC,GAAG,EAAK;EAChD,IAAIA,GAAG,EAAE;IACP,OAAOD,SAAS,CAACZ,SAAS;EAC5B;EAEA,UAAAc,MAAA,CAAUF,SAAS,CAACZ,SAAS;AAC/B,CAAC;AAEM,IAAMe,eAAe,GAAAZ,OAAA,CAAAY,eAAA,GAAG,SAAlBA,eAAeA,CAAIX,GAAG,EAAK;EACtC,IAAMY,UAAU,GAAGZ,GAAG,CAACE,gBAAgB,CAAC,GAAG,CAAC;EAC5C;EACA,IAAIW,GAAG,GAAG,EAAE;EAEZD,UAAU,CAACT,OAAO,CAAC,UAACW,GAAG,EAAEC,KAAK,EAAK;IACjCF,GAAG,IAAIN,cAAc,CAACO,GAAG,EAAEC,KAAK,KAAKH,UAAU,CAACrB,MAAM,GAAG,CAAC,CAAC;EAC7D,CAAC,CAAC;EAEF,OAAOsB,GAAG,IAAI,IAAI;AACpB,CAAC;AAEM,IAAMG,WAAW,GAAAjB,OAAA,CAAAiB,WAAA,GAAG,SAAdA,WAAWA,CAAIC,IAAI,EAAK;EACnC,IAAIC,MAAM,GAAG9B,qBAAqB,CAAC6B,IAAI,CAAC;EACxC,IAAME,cAAc,GAAGC,KAAK,CAACC,IAAI,CAACH,MAAM,CAAChB,gBAAgB,CAAC,GAAG,CAAC,CAAC;EAE/D,IAAIgB,MAAM,CAAChB,gBAAgB,CAAC,GAAG,CAAC,CAACX,MAAM,KAAK,CAAC,EAAE;IAC7C,IAAME,GAAG,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IAEzCF,GAAG,CAACG,SAAS,SAAAc,MAAA,CAASQ,MAAM,CAACtB,SAAS,SAAM;IAC5CsB,MAAM,GAAGzB,GAAG;EACd;;EAEA;EACA,IAAI0B,cAAc,CAAC5B,MAAM,KAAK,CAAC,EAAE;IAC/B,OAAO0B,IAAI;EACb;EAEAnB,QAAQ,CAACoB,MAAM,CAAC;EAEhB,OAAOP,eAAe,CAACO,MAAM,CAAC;AAChC,CAAC","ignoreList":[]}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.32.1",
+  "version": "1.33.0-mui-update.0",
   "description": "Some react components for text selection",
   "keywords": [
     "react",
@@ -17,11 +17,14 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@material-ui/icons": "^3.0.2",
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
     "@pie-framework/parse-english": "^1.0.0",
-    "@pie-lib/render-ui": "^4.35.1",
-    "@pie-lib/style-utils": "^0.21.1",
-    "@pie-lib/translator": "^2.23.1",
+    "@pie-lib/render-ui": "^4.36.0-mui-update.0",
+    "@pie-lib/style-utils": "^0.22.0-mui-update.0",
+    "@pie-lib/translator": "^2.25.0-mui-update.0",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
     "invariant": "^2.2.4",
@@ -30,17 +33,15 @@
     "unist-util-inspect": "^4.1.3"
   },
   "devDependencies": {
-    "@material-ui/core": "^3.8.3",
     "@pie-framework/parse-english": "^1.0.0",
-    "@pie-lib/test-utils": "^0.22.1",
+    "@pie-lib/test-utils": "^0.23.0-mui-update.0",
     "natural": "^0.6.3",
-    "react": "^16.8.1",
-    "react-dom": "^16.9.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "peerDependencies": {
-    "@material-ui/core": "^3.8.3",
-    "react": "^16.8.1"
+    "react": "^18.2.0"
   },
-  "gitHead": "ce0ec7134200c51f3a3301257be3e707054b36ca",
+  "gitHead": "2e0222bda045f46b504640a972d43787e68288c4",
   "scripts": {}
 }

package/src/legend.js

@@ -1,80 +1,87 @@
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import Check from '@material-ui/icons/Check';
-import Close from '@material-ui/icons/Close';
+import { styled } from '@mui/material/styles';
+import Check from '@mui/icons-material/Check';
+import Close from '@mui/icons-material/Close';
 import { color } from '@pie-lib/render-ui';
 import Translator from '@pie-lib/translator';
-import classNames from 'classnames';
 
 const { translator } = Translator;
 
-export const Legend = withStyles((theme) => ({
-  flexContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: `${2 * theme.spacing.unit}px`,
-    borderBottom: '1px solid lightgrey',
-    borderTop: '1px solid lightgrey',
-    paddingBottom: theme.spacing.unit,
-    paddingTop: theme.spacing.unit,
-    marginBottom: theme.spacing.unit,
-  },
-  key: {
-    fontSize: '14px',
-    fontWeight: 'bold',
-    color: color.black(),
-    marginLeft: theme.spacing.unit,
-  },
-  container: {
-    position: 'relative',
-    padding: '4px',
-    fontSize: '14px',
-    borderRadius: '4px',
-  },
-  correct: {
-    border: `${color.correctTertiary()} solid 2px`,
-  },
-  incorrect: {
-    border: `${color.incorrectWithIcon()} solid 2px`,
-  },
-  missing: {
-    border: `${color.incorrectWithIcon()} dashed 2px`,
-  },
-  incorrectIcon: {
-    backgroundColor: color.incorrectWithIcon(),
-  },
-  correctIcon: {
-    backgroundColor: color.correctTertiary(),
-  },
-  icon: {
-    color: color.white(),
-    position: 'absolute',
-    top: '-8px',
-    left: '-8px',
-    borderRadius: '50%',
-    fontSize: '12px',
-    padding: '2px',
-  },
-}))(({ classes, language, showOnlyCorrect }) => {
+const StyledFlexContainer = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  gap: theme.spacing(2),
+  borderBottom: '1px solid lightgrey',
+  borderTop: '1px solid lightgrey',
+  paddingBottom: theme.spacing(1),
+  paddingTop: theme.spacing(1),
+  marginBottom: theme.spacing(1),
+}));
+
+const StyledKey = styled('span')(({ theme }) => ({
+  fontSize: '14px',
+  fontWeight: 'bold',
+  color: color.black(),
+  marginLeft: theme.spacing(1),
+}));
+
+const StyledContainer = styled('div')(() => ({
+  position: 'relative',
+  padding: '4px',
+  fontSize: '14px',
+  borderRadius: '4px',
+}));
+
+const StyledCorrectContainer = styled(StyledContainer)(() => ({
+  border: `${color.correctTertiary()} solid 2px`,
+}));
+
+const StyledIncorrectContainer = styled(StyledContainer)(() => ({
+  border: `${color.incorrectWithIcon()} solid 2px`,
+}));
+
+const StyledMissingContainer = styled(StyledContainer)(() => ({
+  border: `${color.incorrectWithIcon()} dashed 2px`,
+}));
+
+const StyledIcon = styled('div')(() => ({
+  color: color.white(),
+  position: 'absolute',
+  top: '-8px',
+  left: '-8px',
+  borderRadius: '50%',
+  fontSize: '12px',
+  padding: '2px',
+}));
+
+const StyledCorrectIcon = styled(StyledIcon)(() => ({
+  backgroundColor: color.correctTertiary(),
+}));
+
+const StyledIncorrectIcon = styled(StyledIcon)(() => ({
+  backgroundColor: color.incorrectWithIcon(),
+}));
+
+export const Legend = ({ language, showOnlyCorrect }) => {
   const legendItems = [
     {
       Icon: Check,
       label: translator.t('selectText.correctAnswerSelected', { lng: language }),
-      containerClass: classNames(classes.correct, classes.container),
-      iconClass: classNames(classes.correctIcon, classes.icon),
+      Container: StyledCorrectContainer,
+      IconComponent: StyledCorrectIcon,
     },
     {
       Icon: Close,
       label: translator.t('selectText.incorrectSelection', { lng: language }),
-      containerClass: classNames(classes.incorrect, classes.container),
-      iconClass: classNames(classes.incorrectIcon, classes.icon),
+      Container: StyledIncorrectContainer,
+      IconComponent: StyledIncorrectIcon,
     },
     {
       Icon: Close,
       label: translator.t('selectText.correctAnswerNotSelected', { lng: language }),
-      containerClass: classNames(classes.missing, classes.container),
-      iconClass: classNames(classes.incorrectIcon, classes.icon),
+      Container: StyledMissingContainer,
+      IconComponent: StyledIncorrectIcon,
     },
   ];
 
@@ -83,14 +90,16 @@ export const Legend = withStyles((theme) => ({
   }
 
   return (
-    <div className={classes.flexContainer}>
-      <span className={classes.key}>{translator.t('selectText.key', { lng: language })}</span>
-      {legendItems.map(({ Icon, label, containerClass, iconClass }, idx) => (
-        <div key={idx} className={containerClass}>
-          <Icon className={iconClass} />
+    <StyledFlexContainer>
+      <StyledKey>{translator.t('selectText.key', { lng: language })}</StyledKey>
+      {legendItems.map(({ Icon, label, Container, IconComponent }, idx) => (
+        <Container key={idx}>
+          <IconComponent>
+            <Icon />
+          </IconComponent>
           <span>{label}</span>
-        </div>
+        </Container>
       ))}
-    </div>
+    </StyledFlexContainer>
   );
-});
+};

package/src/token-select/index.jsx

@@ -1,21 +1,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Token, { TokenTypes } from './token';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
+import { styled } from '@mui/material/styles';
 import clone from 'lodash/clone';
 import debug from 'debug';
 import { noSelect } from '@pie-lib/style-utils';
-import { renderToString } from 'react-dom/server';
 import isEqual from 'lodash/isEqual';
 
 const log = debug('@pie-lib:text-select:token-select');
 
+const StyledTokenSelect = styled('div')(() => ({
+  backgroundColor: 'none',
+  whiteSpace: 'pre',
+  ...noSelect(),
+  '& p': {
+    whiteSpace: 'break-spaces',
+    margin: 0,
+  },
+}));
+
 export class TokenSelect extends React.Component {
   static propTypes = {
     tokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,
     className: PropTypes.string,
-    classes: PropTypes.object.isRequired,
     onChange: PropTypes.func.isRequired,
     disabled: PropTypes.bool,
     highlightChoices: PropTypes.bool,
@@ -34,49 +41,36 @@ export class TokenSelect extends React.Component {
   canSelectMore = (selectedCount) => {
     const { maxNoOfSelections } = this.props;
 
-    if (maxNoOfSelections === 1) {
-      return true;
-    }
+    if (maxNoOfSelections === 1) return true;
 
     log('[canSelectMore] maxNoOfSelections: ', maxNoOfSelections, 'selectedCount: ', selectedCount);
     return maxNoOfSelections <= 0 || (isFinite(maxNoOfSelections) && selectedCount < maxNoOfSelections);
   };
 
-  /**
-   @function
-   @param { object } event
-
-   @description
-    each token is wrapped into a span that has Token.rootClassName class and indexkey attribute (represents the index of the token)
-    tokens are updated with the targeted token having the correct value set for 'selected' property
-   */
   toggleToken = (event) => {
     const { target } = event;
     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];
 
-    // don't toggle if we are in print mode, token correctness is defined or if it's missing
-    // (missing means that it was evaluated as correct and not selected)
+    const targetSpanWrapper = target.closest?.(`.${Token.rootClassName}`);
+    const targetedTokenIndex = targetSpanWrapper?.dataset?.indexkey;
+    const t = targetedTokenIndex !== undefined ? tokensCloned[targetedTokenIndex] : undefined;
+
+    // don't toggle if in print mode, correctness is defined, or is missing
     if (t && t.correct === undefined && !animationsDisabled && !t.isMissing) {
       const { onChange, maxNoOfSelections } = this.props;
       const selected = !t.selected;
 
       if (maxNoOfSelections === 1 && this.selectedCount() === 1) {
-        const selectedToken = (tokens || []).filter((t) => t.selected);
-
+        const selectedToken = (tokens || []).filter((tk) => tk.selected);
         const updatedTokens = tokensCloned.map((token) => {
           if (isEqual(token, selectedToken[0])) {
             return { ...token, selected: false };
           }
-
           return { ...token, selectable: true };
         });
 
-        const update = { ...t, selected: !t.selected };
-
+        const update = { ...t, selected };
         updatedTokens.splice(targetedTokenIndex, 1, update);
         onChange(updatedTokens);
       } else {
@@ -84,32 +78,42 @@ export class TokenSelect extends React.Component {
           log('skip toggle max reached');
           return;
         }
-
-        const update = { ...t, selected: !t.selected };
-
+        const update = { ...t, selected };
         tokensCloned.splice(targetedTokenIndex, 1, update);
         onChange(tokensCloned);
       }
     }
   };
 
-  generateTokensInHtml = () => {
+  /** Build a React tree instead of an HTML string so Emotion can inject CSS */
+  generateTokensNodes = () => {
     const { tokens, disabled, highlightChoices, animationsDisabled } = this.props;
     const selectedCount = this.selectedCount();
+
     const isLineBreak = (text) => text === '\n';
     const isNewParagraph = (text) => text === '\n\n';
 
-    const reducer = (accumulator, t, index) => {
+    const paragraphs = [];
+    let currentChildren = [];
+
+    const flushParagraph = () => {
+      // Always push a <p>, even if empty, to mirror previous behavior
+      paragraphs.push(<p key={`p-${paragraphs.length}`}>{currentChildren}</p>);
+      currentChildren = [];
+    };
+
+    (tokens || []).forEach((t, index) => {
       const selectable = t.selected || (t.selectable && this.canSelectMore(selectedCount));
       const showCorrectAnswer = t.correct !== undefined && (t.selectable || t.selected);
-      let finalAcc = accumulator;
 
       if (isNewParagraph(t.text)) {
-        return finalAcc + '</p><p>';
+        flushParagraph();
+        return;
       }
 
       if (isLineBreak(t.text)) {
-        return finalAcc + '<br>';
+        currentChildren.push(<br key={`br-${index}`} />);
+        return;
       }
 
       if (
@@ -117,48 +121,41 @@ export class TokenSelect extends React.Component {
         showCorrectAnswer ||
         t.selected ||
         t.isMissing ||
-        (animationsDisabled && t.predefined) // if we are in print mode
+        (animationsDisabled && t.predefined) // print mode
       ) {
-        return (
-          finalAcc +
-          renderToString(
-            <Token
-              key={index}
-              disabled={disabled}
-              index={index}
-              {...t}
-              selectable={selectable}
-              highlight={highlightChoices}
-              animationsDisabled={animationsDisabled}
-            />,
-          )
+        currentChildren.push(
+          <Token
+            key={index}
+            disabled={disabled}
+            index={index}
+            {...t}
+            selectable={selectable}
+            highlight={highlightChoices}
+            animationsDisabled={animationsDisabled}
+          />
         );
       } else {
-        return accumulator + t.text;
+        // raw text node – React will escape as needed
+        currentChildren.push(<React.Fragment key={index}>{t.text}</React.Fragment>);
       }
-    };
+    });
 
-    const reduceResult = (tokens || []).reduce(reducer, '<p>');
+    // flush last paragraph
+    flushParagraph();
 
-    return reduceResult + '</p>';
+    return paragraphs;
   };
 
   render() {
-    const { classes, className: classNameProp } = this.props;
-    const className = classNames(classes.tokenSelect, classNameProp);
-    const html = this.generateTokensInHtml();
-
-    return <div className={className} dangerouslySetInnerHTML={{ __html: html }} onClick={this.toggleToken} />;
+    const { className: classNameProp } = this.props;
+    const nodes = this.generateTokensNodes();
+
+    return (
+      <StyledTokenSelect className={classNameProp} onClick={this.toggleToken}>
+        {nodes}
+      </StyledTokenSelect>
+    );
   }
 }
 
-export default withStyles(() => ({
-  tokenSelect: {
-    backgroundColor: 'none',
-    whiteSpace: 'pre',
-    ...noSelect(),
-    '& p': {
-      whiteSpace: 'break-spaces',
-    },
-  },
-}))(TokenSelect);
+export default TokenSelect;