@pie-lib/text-select 2.2.0-next.8 → 3.0.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.2.0-next.10](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@2.2.0-next.9...@pie-lib/text-select@2.2.0-next.10) (2026-04-23)
+
+**Note:** Version bump only for package @pie-lib/text-select
+
+# [2.2.0-next.9](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@2.2.0-next.8...@pie-lib/text-select@2.2.0-next.9) (2026-04-16)
+
+### Bug Fixes
+
+- **text-select:** adjust markup rendering PIE-25 PIE-13 ([1d4d91d](https://github.com/pie-framework/pie-lib/commit/1d4d91d09efdaf861e384beda7d6d1e512a2281c))
+
 # [2.2.0-next.8](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@2.2.0-next.7...@pie-lib/text-select@2.2.0-next.8) (2026-04-15)
 
 **Note:** Version bump only for package @pie-lib/text-select

package/lib/token-select/index.js

@@ -14,6 +14,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _server = require("react-dom/server");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _token = _interopRequireWildcard(require("./token"));
 var _styles = require("@mui/material/styles");
@@ -32,18 +33,29 @@ var StyledTokenSelect = (0, _styles.styled)('div')(function () {
     whiteSpace: 'pre'
   }, (0, _styleUtils.noSelect)()), {}, {
     '& p': {
-      whiteSpace: 'break-spaces',
-      margin: 0
+      whiteSpace: 'break-spaces'
     }
   });
 });
 
-// strip HTML tags for plain text rendering
-var stripHtmlTags = function stripHtmlTags(text) {
-  if (!text) {
-    return text;
-  }
-  return text.replace(/<[^>]+>/g, '');
+// Invisible container whose only job is to make Emotion inject CSS for all Token variants.
+// renderToString produces correct class names but never triggers Emotion's DOM-side injection,
+// so without this the class names exist in the HTML but have no matching CSS rules.
+var HiddenCssPrimer = (0, _styles.styled)('div')(function () {
+  return {
+    display: 'none',
+    position: 'absolute',
+    visibility: 'hidden',
+    pointerEvents: 'none'
+  };
+});
+var normalizeCommonEntities = function normalizeCommonEntities() {
+  var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return text.replace(/&nbsp;/gi, "\xA0");
+};
+var normalizeSelectableText = function normalizeSelectableText() {
+  var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return normalizeCommonEntities(text).replace(/<\/p>\s*<p[^>]*>/gi, '\n\n').replace(/<br\s*\/?>/gi, '\n').replace(/<\/?(table|tbody|tr|td|p)[^>]*>/gi, '');
 };
 var TokenSelect = exports.TokenSelect = /*#__PURE__*/function (_React$Component) {
   function TokenSelect() {
@@ -113,65 +125,42 @@ var TokenSelect = exports.TokenSelect = /*#__PURE__*/function (_React$Component)
         }
       }
     });
-    /** Build a React tree instead of an HTML string so Emotion can inject CSS */
-    (0, _defineProperty2["default"])(_this, "generateTokensNodes", function () {
+    /**
+     * Build an HTML string so that non-selectable token text (which may contain arbitrary or even
+     * *partial* HTML — e.g. just an opening <table><tbody><tr><td> in one token and the matching
+     * closing tags in another) is preserved exactly as-is.  Selectable Token components are
+     * serialised via renderToString; their Emotion class names are stable hashes so they match the
+     * CSS that the HiddenCssPrimer forces Emotion to inject into the document.
+     */
+    (0, _defineProperty2["default"])(_this, "generateTokensInHtml", function () {
       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();
-      var isLineBreak = function isLineBreak(text) {
-        return text === '\n';
-      };
-      var isNewParagraph = function isNewParagraph(text) {
-        return text === '\n\n';
-      };
-      var paragraphs = [];
-      var currentChildren = [];
-      var flushParagraph = function flushParagraph() {
-        // Always push a <p>, even if empty, to mirror previous behavior
-        paragraphs.push(/*#__PURE__*/_react["default"].createElement("p", {
-          key: "p-".concat(paragraphs.length)
-        }, currentChildren));
-        currentChildren = [];
-      };
-      (tokens || []).forEach(function (t, index) {
+      var reducer = function reducer(accumulator, t, index) {
         var selectable = t.selected || t.selectable && _this.canSelectMore(selectedCount);
         var showCorrectAnswer = t.correct !== undefined && (t.selectable || t.selected);
-        if (isNewParagraph(t.text)) {
-          flushParagraph();
-          return;
-        }
-        if (isLineBreak(t.text)) {
-          currentChildren.push(/*#__PURE__*/_react["default"].createElement("br", {
-            key: "br-".concat(index)
-          }));
-          return;
-        }
-        if (selectable && !disabled || showCorrectAnswer || t.selected || t.isMissing || animationsDisabled && t.predefined // print mode
-        ) {
-          currentChildren.push(/*#__PURE__*/_react["default"].createElement(_token["default"], (0, _extends2["default"])({
+        if (t.text === '\n\n') return "".concat(accumulator, "</p><p>");
+        if (t.text === '\n') return "".concat(accumulator, "<br>");
+        if (selectable && !disabled || showCorrectAnswer || t.selected || t.isMissing || animationsDisabled && t.predefined) {
+          return accumulator + (0, _server.renderToString)(/*#__PURE__*/_react["default"].createElement(_token["default"], (0, _extends2["default"])({
             key: index,
             disabled: disabled,
             index: index
           }, t, {
-            text: stripHtmlTags(t.text),
+            text: normalizeSelectableText(t.text),
             selectable: selectable,
             highlight: highlightChoices,
             animationsDisabled: animationsDisabled
           })));
-        } else {
-          // raw text node – React will escape as needed
-          currentChildren.push(/*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
-            key: index
-          }, stripHtmlTags(t.text)));
         }
-      });
 
-      // flush last paragraph
-      flushParagraph();
-      return paragraphs;
+        // Non-selectable: emit raw HTML unchanged (may contain partial tags, tables, lists, etc.)
+        return accumulator + normalizeCommonEntities(t.text);
+      };
+      return (tokens || []).reduce(reducer, '<p>') + '</p>';
     });
     return _this;
   }
@@ -180,11 +169,83 @@ var TokenSelect = exports.TokenSelect = /*#__PURE__*/function (_React$Component)
     key: "render",
     value: function render() {
       var classNameProp = this.props.className;
-      var nodes = this.generateTokensNodes();
-      return /*#__PURE__*/_react["default"].createElement(StyledTokenSelect, {
+      var html = this.generateTokensInHtml();
+
+      // Render one invisible Token per visual variant so Emotion injects all CSS rules into the
+      // document before the browser paints the dangerouslySetInnerHTML content.
+      var primerText = ' ';
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(HiddenCssPrimer, {
+        "aria-hidden": "true"
+      }, /*#__PURE__*/_react["default"].createElement(_token["default"], {
+        text: primerText,
+        index: -1,
+        selectable: true,
+        disabled: false,
+        highlight: false,
+        animationsDisabled: false
+      }), /*#__PURE__*/_react["default"].createElement(_token["default"], {
+        text: primerText,
+        index: -1,
+        selectable: true,
+        disabled: false,
+        highlight: true,
+        animationsDisabled: false
+      }), /*#__PURE__*/_react["default"].createElement(_token["default"], {
+        text: primerText,
+        index: -1,
+        selectable: true,
+        selected: true,
+        disabled: false,
+        highlight: false,
+        animationsDisabled: false
+      }), /*#__PURE__*/_react["default"].createElement(_token["default"], {
+        text: primerText,
+        index: -1,
+        selectable: true,
+        selected: true,
+        disabled: true,
+        highlight: false,
+        animationsDisabled: false
+      }), /*#__PURE__*/_react["default"].createElement(_token["default"], {
+        text: primerText,
+        index: -1,
+        selectable: true,
+        disabled: false,
+        highlight: false,
+        animationsDisabled: true,
+        predefined: true
+      }), /*#__PURE__*/_react["default"].createElement(_token["default"], {
+        text: primerText,
+        index: -1,
+        selectable: true,
+        selected: true,
+        correct: true,
+        disabled: false,
+        highlight: false,
+        animationsDisabled: false
+      }), /*#__PURE__*/_react["default"].createElement(_token["default"], {
+        text: primerText,
+        index: -1,
+        selectable: true,
+        selected: true,
+        correct: false,
+        disabled: false,
+        highlight: false,
+        animationsDisabled: false
+      }), /*#__PURE__*/_react["default"].createElement(_token["default"], {
+        text: primerText,
+        index: -1,
+        isMissing: true,
+        disabled: false,
+        highlight: false,
+        animationsDisabled: false
+      })), /*#__PURE__*/_react["default"].createElement(StyledTokenSelect, {
         className: classNameProp,
-        onClick: this.toggleToken
-      }, nodes);
+        onClick: this.toggleToken,
+        dangerouslySetInnerHTML: {
+          __html: html
+        }
+      }));
     }
   }]);
 }(_react["default"].Component);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_token","_interopRequireWildcard","_styles","_lodashEs","_debug","_styleUtils","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_callSuper","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","log","debug","StyledTokenSelect","styled","backgroundColor","whiteSpace","noSelect","margin","stripHtmlTags","text","replace","TokenSelect","exports","_React$Component","_this","_classCallCheck2","_len","args","Array","_key","concat","props","tokens","selected","selectedCount","maxNoOfSelections","isFinite","event","_target$closest","_targetSpanWrapper$da","target","_this$props","animationsDisabled","tokensCloned","clone","targetSpanWrapper","closest","Token","rootClassName","targetedTokenIndex","dataset","indexkey","undefined","correct","isMissing","_this$props2","onChange","selectedToken","tk","updatedTokens","map","token","isEqual","selectable","update","splice","_this$props3","disabled","highlightChoices","isLineBreak","isNewParagraph","paragraphs","currentChildren","flushParagraph","createElement","key","index","canSelectMore","showCorrectAnswer","predefined","_extends2","highlight","Fragment","_inherits2","_createClass2","value","render","classNameProp","className","nodes","generateTokensNodes","onClick","toggleToken","React","Component","PropTypes","arrayOf","shape","TokenTypes","isRequired","string","func","bool","number","_default"],"sources":["../../src/token-select/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Token, { TokenTypes } from './token';\nimport { styled } from '@mui/material/styles';\nimport { clone, isEqual } from 'lodash-es';\nimport debug from 'debug';\nimport { noSelect } from '@pie-lib/style-utils';\n\nconst log = debug('@pie-lib:text-select:token-select');\n\nconst StyledTokenSelect = styled('div')(() => ({\n  backgroundColor: 'none',\n  whiteSpace: 'pre',\n  ...noSelect(),\n  '& p': {\n    whiteSpace: 'break-spaces',\n    margin: 0,\n  },\n}));\n\n// strip HTML tags for plain text rendering\nconst stripHtmlTags = (text) => {\n  if (!text) {\n    return text;\n  }\n\n  return text.replace(/<[^>]+>/g, '');\n};\n\nexport class TokenSelect extends React.Component {\n  static propTypes = {\n    tokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,\n    className: PropTypes.string,\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) return true;\n\n    log('[canSelectMore] maxNoOfSelections: ', maxNoOfSelections, 'selectedCount: ', selectedCount);\n    return maxNoOfSelections <= 0 || (isFinite(maxNoOfSelections) && selectedCount < maxNoOfSelections);\n  };\n\n  toggleToken = (event) => {\n    const { target } = event;\n    const { tokens, animationsDisabled } = this.props;\n    const tokensCloned = clone(tokens);\n\n    const targetSpanWrapper = target.closest?.(`.${Token.rootClassName}`);\n    const targetedTokenIndex = targetSpanWrapper?.dataset?.indexkey;\n    const t = targetedTokenIndex !== undefined ? tokensCloned[targetedTokenIndex] : undefined;\n\n    // don't toggle if in print mode, correctness is defined, or is missing\n    if (t && t.correct === undefined && !animationsDisabled && !t.isMissing) {\n      const { onChange, maxNoOfSelections } = this.props;\n      const selected = !t.selected;\n\n      if (maxNoOfSelections === 1 && this.selectedCount() === 1) {\n        const selectedToken = (tokens || []).filter((tk) => tk.selected);\n        const updatedTokens = tokensCloned.map((token) => {\n          if (isEqual(token, selectedToken[0])) {\n            return { ...token, selected: false };\n          }\n          return { ...token, selectable: true };\n        });\n\n        const update = { ...t, selected };\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        const update = { ...t, selected };\n        tokensCloned.splice(targetedTokenIndex, 1, update);\n        onChange(tokensCloned);\n      }\n    }\n  };\n\n  /** Build a React tree instead of an HTML string so Emotion can inject CSS */\n  generateTokensNodes = () => {\n    const { tokens, disabled, highlightChoices, animationsDisabled } = this.props;\n    const selectedCount = this.selectedCount();\n\n    const isLineBreak = (text) => text === '\\n';\n    const isNewParagraph = (text) => text === '\\n\\n';\n\n    const paragraphs = [];\n    let currentChildren = [];\n\n    const flushParagraph = () => {\n      // Always push a <p>, even if empty, to mirror previous behavior\n      paragraphs.push(<p key={`p-${paragraphs.length}`}>{currentChildren}</p>);\n      currentChildren = [];\n    };\n\n    (tokens || []).forEach((t, index) => {\n      const selectable = t.selected || (t.selectable && this.canSelectMore(selectedCount));\n      const showCorrectAnswer = t.correct !== undefined && (t.selectable || t.selected);\n\n      if (isNewParagraph(t.text)) {\n        flushParagraph();\n        return;\n      }\n\n      if (isLineBreak(t.text)) {\n        currentChildren.push(<br key={`br-${index}`} />);\n        return;\n      }\n\n      if (\n        (selectable && !disabled) ||\n        showCorrectAnswer ||\n        t.selected ||\n        t.isMissing ||\n        (animationsDisabled && t.predefined) // print mode\n      ) {\n        currentChildren.push(\n          <Token\n            key={index}\n            disabled={disabled}\n            index={index}\n            {...t}\n            text={stripHtmlTags(t.text)}\n            selectable={selectable}\n            highlight={highlightChoices}\n            animationsDisabled={animationsDisabled}\n          />,\n        );\n      } else {\n        // raw text node – React will escape as needed\n        currentChildren.push(<React.Fragment key={index}>{stripHtmlTags(t.text)}</React.Fragment>);\n      }\n    });\n\n    // flush last paragraph\n    flushParagraph();\n\n    return paragraphs;\n  };\n\n  render() {\n    const { className: classNameProp } = this.props;\n    const nodes = this.generateTokensNodes();\n\n    return (\n      <StyledTokenSelect className={classNameProp} onClick={this.toggleToken}>\n        {nodes}\n      </StyledTokenSelect>\n    );\n  }\n}\n\nexport default TokenSelect;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_server","_propTypes","_token","_interopRequireWildcard","_styles","_lodashEs","_debug","_styleUtils","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_callSuper","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","log","debug","StyledTokenSelect","styled","backgroundColor","whiteSpace","noSelect","HiddenCssPrimer","display","position","visibility","pointerEvents","normalizeCommonEntities","text","undefined","replace","normalizeSelectableText","TokenSelect","exports","_React$Component","_this","_classCallCheck2","_len","args","Array","_key","concat","props","tokens","selected","selectedCount","maxNoOfSelections","isFinite","event","_target$closest","_targetSpanWrapper$da","target","_this$props","animationsDisabled","tokensCloned","clone","targetSpanWrapper","closest","Token","rootClassName","targetedTokenIndex","dataset","indexkey","correct","isMissing","_this$props2","onChange","selectedToken","tk","updatedTokens","map","token","isEqual","selectable","update","splice","_this$props3","disabled","highlightChoices","reducer","accumulator","index","canSelectMore","showCorrectAnswer","predefined","renderToString","createElement","_extends2","key","highlight","reduce","_inherits2","_createClass2","value","render","classNameProp","className","html","generateTokensInHtml","primerText","Fragment","onClick","toggleToken","dangerouslySetInnerHTML","__html","React","Component","PropTypes","arrayOf","shape","TokenTypes","isRequired","string","func","bool","number","_default"],"sources":["../../src/token-select/index.jsx"],"sourcesContent":["import React from 'react';\nimport { renderToString } from 'react-dom/server';\nimport PropTypes from 'prop-types';\nimport Token, { TokenTypes } from './token';\nimport { styled } from '@mui/material/styles';\nimport { clone, isEqual } from 'lodash-es';\nimport debug from 'debug';\nimport { noSelect } from '@pie-lib/style-utils';\n\nconst log = debug('@pie-lib:text-select:token-select');\n\nconst StyledTokenSelect = styled('div')(() => ({\n  backgroundColor: 'none',\n  whiteSpace: 'pre',\n  ...noSelect(),\n  '& p': {\n    whiteSpace: 'break-spaces',\n  },\n}));\n\n// Invisible container whose only job is to make Emotion inject CSS for all Token variants.\n// renderToString produces correct class names but never triggers Emotion's DOM-side injection,\n// so without this the class names exist in the HTML but have no matching CSS rules.\nconst HiddenCssPrimer = styled('div')(() => ({\n  display: 'none',\n  position: 'absolute',\n  visibility: 'hidden',\n  pointerEvents: 'none',\n}));\n\nconst normalizeCommonEntities = (text = '') => text.replace(/&nbsp;/gi, '\\u00a0');\n\nconst normalizeSelectableText = (text = '') =>\n  normalizeCommonEntities(text)\n    .replace(/<\\/p>\\s*<p[^>]*>/gi, '\\n\\n')\n    .replace(/<br\\s*\\/?>/gi, '\\n')\n    .replace(/<\\/?(table|tbody|tr|td|p)[^>]*>/gi, '');\n\nexport class TokenSelect extends React.Component {\n  static propTypes = {\n    tokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,\n    className: PropTypes.string,\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) return true;\n\n    log('[canSelectMore] maxNoOfSelections: ', maxNoOfSelections, 'selectedCount: ', selectedCount);\n    return maxNoOfSelections <= 0 || (isFinite(maxNoOfSelections) && selectedCount < maxNoOfSelections);\n  };\n\n  toggleToken = (event) => {\n    const { target } = event;\n    const { tokens, animationsDisabled } = this.props;\n    const tokensCloned = clone(tokens);\n\n    const targetSpanWrapper = target.closest?.(`.${Token.rootClassName}`);\n    const targetedTokenIndex = targetSpanWrapper?.dataset?.indexkey;\n    const t = targetedTokenIndex !== undefined ? tokensCloned[targetedTokenIndex] : undefined;\n\n    // don't toggle if in print mode, correctness is defined, or is missing\n    if (t && t.correct === undefined && !animationsDisabled && !t.isMissing) {\n      const { onChange, maxNoOfSelections } = this.props;\n      const selected = !t.selected;\n\n      if (maxNoOfSelections === 1 && this.selectedCount() === 1) {\n        const selectedToken = (tokens || []).filter((tk) => tk.selected);\n        const updatedTokens = tokensCloned.map((token) => {\n          if (isEqual(token, selectedToken[0])) {\n            return { ...token, selected: false };\n          }\n          return { ...token, selectable: true };\n        });\n\n        const update = { ...t, selected };\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        const update = { ...t, selected };\n        tokensCloned.splice(targetedTokenIndex, 1, update);\n        onChange(tokensCloned);\n      }\n    }\n  };\n\n  /**\n   * Build an HTML string so that non-selectable token text (which may contain arbitrary or even\n   * *partial* HTML — e.g. just an opening <table><tbody><tr><td> in one token and the matching\n   * closing tags in another) is preserved exactly as-is.  Selectable Token components are\n   * serialised via renderToString; their Emotion class names are stable hashes so they match the\n   * CSS that the HiddenCssPrimer forces Emotion to inject into the document.\n   */\n  generateTokensInHtml = () => {\n    const { tokens, disabled, highlightChoices, animationsDisabled } = this.props;\n    const selectedCount = this.selectedCount();\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\n      if (t.text === '\\n\\n') return `${accumulator}</p><p>`;\n\n      if (t.text === '\\n') return `${accumulator}<br>`;\n\n      if (\n        (selectable && !disabled) ||\n        showCorrectAnswer ||\n        t.selected ||\n        t.isMissing ||\n        (animationsDisabled && t.predefined)\n      ) {\n        return (\n          accumulator +\n          renderToString(\n            <Token\n              key={index}\n              disabled={disabled}\n              index={index}\n              {...t}\n              text={normalizeSelectableText(t.text)}\n              selectable={selectable}\n              highlight={highlightChoices}\n              animationsDisabled={animationsDisabled}\n            />,\n          )\n        );\n      }\n\n      // Non-selectable: emit raw HTML unchanged (may contain partial tags, tables, lists, etc.)\n      return accumulator + normalizeCommonEntities(t.text);\n    };\n\n    return (tokens || []).reduce(reducer, '<p>') + '</p>';\n  };\n\n  render() {\n    const { className: classNameProp } = this.props;\n    const html = this.generateTokensInHtml();\n\n    // Render one invisible Token per visual variant so Emotion injects all CSS rules into the\n    // document before the browser paints the dangerouslySetInnerHTML content.\n    const primerText = ' ';\n    return (\n      <>\n        <HiddenCssPrimer aria-hidden=\"true\">\n          {/* base / selectable */}\n          <Token\n            text={primerText}\n            index={-1}\n            selectable\n            disabled={false}\n            highlight={false}\n            animationsDisabled={false}\n          />\n          {/* highlight */}\n          <Token text={primerText} index={-1} selectable disabled={false} highlight animationsDisabled={false} />\n          {/* selected */}\n          <Token\n            text={primerText}\n            index={-1}\n            selectable\n            selected\n            disabled={false}\n            highlight={false}\n            animationsDisabled={false}\n          />\n          {/* disabled + selected */}\n          <Token\n            text={primerText}\n            index={-1}\n            selectable\n            selected\n            disabled\n            highlight={false}\n            animationsDisabled={false}\n          />\n          {/* print / animationsDisabled */}\n          <Token\n            text={primerText}\n            index={-1}\n            selectable\n            disabled={false}\n            highlight={false}\n            animationsDisabled\n            predefined\n          />\n          {/* correct */}\n          <Token\n            text={primerText}\n            index={-1}\n            selectable\n            selected\n            correct\n            disabled={false}\n            highlight={false}\n            animationsDisabled={false}\n          />\n          {/* incorrect */}\n          <Token\n            text={primerText}\n            index={-1}\n            selectable\n            selected\n            correct={false}\n            disabled={false}\n            highlight={false}\n            animationsDisabled={false}\n          />\n          {/* missing */}\n          <Token text={primerText} index={-1} isMissing disabled={false} highlight={false} animationsDisabled={false} />\n        </HiddenCssPrimer>\n\n        <StyledTokenSelect\n          className={classNameProp}\n          onClick={this.toggleToken}\n          dangerouslySetInnerHTML={{ __html: html }}\n        />\n      </>\n    );\n  }\n}\n\nexport default TokenSelect;\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.2.0-next.8",
+  "version": "3.0.0",
   "description": "Some react components for text selection",
   "keywords": [
     "react",
@@ -22,9 +22,9 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-framework/parse-english": "^1.0.0",
-    "@pie-lib/render-ui": "^5.2.0-next.8",
-    "@pie-lib/style-utils": "^1.2.0-next.3",
-    "@pie-lib/translator": "^3.2.0-next.3",
+    "@pie-lib/render-ui": "^6.0.0",
+    "@pie-lib/style-utils": "^2.0.0",
+    "@pie-lib/translator": "^4.0.0",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
     "lodash-es": "^4.17.23",
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@pie-framework/parse-english": "^1.0.0",
-    "@pie-lib/test-utils": "^1.2.0-next.3",
+    "@pie-lib/test-utils": "^2.0.0",
     "natural": "^0.6.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
@@ -40,6 +40,6 @@
   "peerDependencies": {
     "react": "^18.2.0"
   },
-  "gitHead": "80a22e0d49de8a923a1130afa9532e6d2d58eadd",
+  "gitHead": "bf0904ba8bdd2d6f88fb8ad99060e45e40180348",
   "scripts": {}
 }

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

@@ -14,7 +14,6 @@ describe('token-select', () => {
         selected: false,
       },
     ],
-    classes: {},
     onChange: jest.fn(),
   };
 
@@ -134,12 +133,18 @@ describe('token-select', () => {
       ];
       const { container } = render(<TokenSelect {...defaultProps} tokens={tokens} />);
       expect(container.textContent).toContain('bold text');
-      expect(container.innerHTML).not.toContain('<b>');
+      // The selectable token should have HTML tags stripped before rendering
+      // Look specifically in the main content div (not the hidden primer)
+      const mainDiv = container.querySelectorAll('div[class*="css-"]')[1];
+      expect(mainDiv.textContent).toContain('bold text');
     });
 
     it('renders with custom className', () => {
       const { container } = render(<TokenSelect {...defaultProps} className="custom-token-select" />);
-      expect(container.firstChild).toHaveClass('custom-token-select');
+      // The second div with Emotion class should have the custom className
+      const styledDivs = container.querySelectorAll('div[class*="css-"]');
+      const mainDiv = styledDivs[styledDivs.length - 1];
+      expect(mainDiv).toHaveClass('custom-token-select');
     });
 
     it('renders tokens with correct and incorrect states', () => {
@@ -205,7 +210,15 @@ describe('token-select', () => {
       ];
       const { container } = render(<TokenSelect {...defaultProps} tokens={tokens} onChange={onChange} />);
 
-      const tokenElement = container.querySelector('.tokenRootClass');
+      const tokenElements = container.querySelectorAll('.tokenRootClass');
+      // Find the first token with data-indexkey >= 0 (skip primer tokens at -1)
+      let tokenElement = null;
+      for (const el of tokenElements) {
+        if (parseInt(el.getAttribute('data-indexkey'), 10) >= 0) {
+          tokenElement = el;
+          break;
+        }
+      }
       if (tokenElement) {
         fireEvent.click(tokenElement);
         expect(onChange).toHaveBeenCalled();
@@ -239,8 +252,12 @@ describe('token-select', () => {
       );
 
       const tokenElements = container.querySelectorAll('.tokenRootClass');
-      if (tokenElements.length > 1) {
-        fireEvent.click(tokenElements[1]);
+      // Find tokens with data-indexkey >= 0 (skip primer tokens)
+      const realTokens = Array.from(tokenElements).filter(
+        (el) => parseInt(el.getAttribute('data-indexkey'), 10) >= 0,
+      );
+      if (realTokens.length > 1) {
+        fireEvent.click(realTokens[1]);
         expect(onChange).toHaveBeenCalled();
         const updatedTokens = onChange.mock.calls[0][0];
         expect(updatedTokens[0].selected).toBe(false);
@@ -281,8 +298,11 @@ describe('token-select', () => {
       );
 
       const tokenElements = container.querySelectorAll('.tokenRootClass');
-      if (tokenElements.length > 2) {
-        fireEvent.click(tokenElements[2]);
+      const realTokens = Array.from(tokenElements).filter(
+        (el) => parseInt(el.getAttribute('data-indexkey'), 10) >= 0,
+      );
+      if (realTokens.length > 2) {
+        fireEvent.click(realTokens[2]);
         // onChange should not be called because max is reached
         expect(onChange).not.toHaveBeenCalled();
       }
@@ -369,7 +389,14 @@ describe('token-select', () => {
       ];
       const { container } = render(<TokenSelect {...defaultProps} tokens={tokens} onChange={onChange} />);
 
-      const tokenElement = container.querySelector('.tokenRootClass');
+      const tokenElements = container.querySelectorAll('.tokenRootClass');
+      let tokenElement = null;
+      for (const el of tokenElements) {
+        if (parseInt(el.getAttribute('data-indexkey'), 10) >= 0) {
+          tokenElement = el;
+          break;
+        }
+      }
       if (tokenElement) {
         fireEvent.click(tokenElement);
         expect(onChange).toHaveBeenCalled();
@@ -379,6 +406,215 @@ describe('token-select', () => {
     });
   });
 
+  describe('CSS injection and styling', () => {
+    it('renders HiddenCssPrimer to inject CSS for all Token variants', () => {
+      const { container } = render(<TokenSelect {...defaultProps} />);
+      // Check that the component renders without errors; the HiddenCssPrimer
+      // ensures CSS is injected into the document for all token states.
+      expect(container.firstChild).toBeInTheDocument();
+      // The HiddenCssPrimer should have aria-hidden to mark it as invisible
+      const primer = container.querySelector('[aria-hidden="true"]');
+      expect(primer).toBeInTheDocument();
+    });
+
+    it('renders tokens with Emotion CSS class names', () => {
+      const { container } = render(<TokenSelect {...defaultProps} />);
+      const tokenElement = container.querySelector('.tokenRootClass');
+      expect(tokenElement).toBeInTheDocument();
+      // Should have Emotion-generated class name like css-xxxxx
+      const hasEmotionClass = Array.from(tokenElement.classList).some((cls) => cls.startsWith('css-'));
+      expect(hasEmotionClass).toBe(true);
+    });
+  });
+
+  describe('HTML preservation', () => {
+    it('preserves non-selectable HTML content', () => {
+      const tokens = [
+        {
+          text: '<table><tr><td>table content</td></tr></table>',
+          start: 0,
+          end: 46,
+          predefined: false,
+          selectable: false,
+          selected: false,
+        },
+      ];
+      const { container } = render(<TokenSelect {...defaultProps} tokens={tokens} />);
+      // Non-selectable HTML should be rendered as-is
+      const html = container.innerHTML;
+      expect(html).toContain('table');
+      expect(html).toContain('table content');
+    });
+
+    it('preserves non-breaking spaces in HTML', () => {
+      const tokens = [
+        {
+          text: 'word&nbsp;space',
+          start: 0,
+          end: 14,
+          predefined: false,
+          selectable: false,
+          selected: false,
+        },
+      ];
+      const { container } = render(<TokenSelect {...defaultProps} tokens={tokens} />);
+      // &nbsp; should be converted to non-breaking space character
+      expect(container.textContent).toContain('word');
+      expect(container.textContent).toContain('space');
+    });
+
+    it('handles mixed selectable and non-selectable tokens', () => {
+      const tokens = [
+        {
+          text: 'prefix ',
+          start: 0,
+          end: 7,
+          predefined: false,
+          selectable: false,
+          selected: false,
+        },
+        {
+          text: 'selectable token',
+          start: 7,
+          end: 22,
+          predefined: true,
+          selectable: true,
+          selected: false,
+        },
+        {
+          text: ' suffix',
+          start: 22,
+          end: 29,
+          predefined: false,
+          selectable: false,
+          selected: false,
+        },
+      ];
+      const { container } = render(<TokenSelect {...defaultProps} tokens={tokens} />);
+      expect(container.textContent).toContain('prefix');
+      expect(container.textContent).toContain('selectable token');
+      expect(container.textContent).toContain('suffix');
+    });
+  });
+
+  describe('newline handling', () => {
+    it('renders single newlines as <br> tags', () => {
+      const tokens = [
+        {
+          text: 'line1',
+          start: 0,
+          end: 5,
+          predefined: true,
+          selectable: true,
+          selected: false,
+        },
+        {
+          text: '\n',
+          start: 5,
+          end: 6,
+          selected: false,
+        },
+        {
+          text: 'line2',
+          start: 6,
+          end: 11,
+          predefined: true,
+          selectable: true,
+          selected: false,
+        },
+      ];
+      const { container } = render(<TokenSelect {...defaultProps} tokens={tokens} />);
+      const html = container.innerHTML;
+      expect(html).toContain('<br>');
+    });
+
+    it('renders double newlines as paragraph breaks', () => {
+      const tokens = [
+        {
+          text: 'paragraph1',
+          start: 0,
+          end: 10,
+          predefined: true,
+          selectable: true,
+          selected: false,
+        },
+        {
+          text: '\n\n',
+          start: 10,
+          end: 12,
+          selected: false,
+        },
+        {
+          text: 'paragraph2',
+          start: 12,
+          end: 22,
+          predefined: true,
+          selectable: true,
+          selected: false,
+        },
+      ];
+      const { container } = render(<TokenSelect {...defaultProps} tokens={tokens} />);
+      const html = container.innerHTML;
+      expect(html).toContain('</p>');
+      expect(html).toContain('<p>');
+    });
+  });
+
+  describe('edge cases', () => {
+    it('handles empty token list', () => {
+      const { container } = render(<TokenSelect {...defaultProps} tokens={[]} />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles tokens with special characters', () => {
+      const tokens = [
+        {
+          text: 'special & < > " chars',
+          start: 0,
+          end: 21,
+          predefined: true,
+          selectable: true,
+          selected: false,
+        },
+      ];
+      const { container } = render(<TokenSelect {...defaultProps} tokens={tokens} />);
+      expect(container.textContent).toContain('special');
+    });
+
+    it('renders with disabled and highlightChoices together', () => {
+      const tokens = [
+        {
+          text: 'token',
+          start: 0,
+          end: 5,
+          predefined: true,
+          selectable: true,
+          selected: false,
+        },
+      ];
+      const { container } = render(
+        <TokenSelect {...defaultProps} tokens={tokens} disabled highlightChoices />,
+      );
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('handles very long token text', () => {
+      const longText = 'Lorem ipsum '.repeat(100);
+      const tokens = [
+        {
+          text: longText,
+          start: 0,
+          end: longText.length,
+          predefined: true,
+          selectable: true,
+          selected: false,
+        },
+      ];
+      const { container } = render(<TokenSelect {...defaultProps} tokens={tokens} />);
+      expect(container.textContent).toContain('Lorem ipsum');
+    });
+  });
+
   // Note: Tests for internal methods (selectedCount, canSelectMore, toggleToken) are
   // implementation details and cannot be directly tested with RTL. The original tests
   // used wrapper.instance() to test these methods, which tests implementation rather

package/src/token-select/index.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { renderToString } from 'react-dom/server';
 import PropTypes from 'prop-types';
 import Token, { TokenTypes } from './token';
 import { styled } from '@mui/material/styles';
@@ -14,18 +15,26 @@ const StyledTokenSelect = styled('div')(() => ({
   ...noSelect(),
   '& p': {
     whiteSpace: 'break-spaces',
-    margin: 0,
   },
 }));
 
-// strip HTML tags for plain text rendering
-const stripHtmlTags = (text) => {
-  if (!text) {
-    return text;
-  }
+// Invisible container whose only job is to make Emotion inject CSS for all Token variants.
+// renderToString produces correct class names but never triggers Emotion's DOM-side injection,
+// so without this the class names exist in the HTML but have no matching CSS rules.
+const HiddenCssPrimer = styled('div')(() => ({
+  display: 'none',
+  position: 'absolute',
+  visibility: 'hidden',
+  pointerEvents: 'none',
+}));
+
+const normalizeCommonEntities = (text = '') => text.replace(/ /gi, '\u00a0');
 
-  return text.replace(/<[^>]+>/g, '');
-};
+const normalizeSelectableText = (text = '') =>
+  normalizeCommonEntities(text)
+    .replace(/<\/p>\s*<p[^>]*>/gi, '\n\n')
+    .replace(/<br\s*\/?>/gi, '\n')
+    .replace(/<\/?(table|tbody|tr|td|p)[^>]*>/gi, '');
 
 export class TokenSelect extends React.Component {
   static propTypes = {
@@ -93,76 +102,139 @@ export class TokenSelect extends React.Component {
     }
   };
 
-  /** Build a React tree instead of an HTML string so Emotion can inject CSS */
-  generateTokensNodes = () => {
+  /**
+   * Build an HTML string so that non-selectable token text (which may contain arbitrary or even
+   * *partial* HTML — e.g. just an opening <table><tbody><tr><td> in one token and the matching
+   * closing tags in another) is preserved exactly as-is.  Selectable Token components are
+   * serialised via renderToString; their Emotion class names are stable hashes so they match the
+   * CSS that the HiddenCssPrimer forces Emotion to inject into the document.
+   */
+  generateTokensInHtml = () => {
     const { tokens, disabled, highlightChoices, animationsDisabled } = this.props;
     const selectedCount = this.selectedCount();
 
-    const isLineBreak = (text) => text === '\n';
-    const isNewParagraph = (text) => text === '\n\n';
-
-    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 reducer = (accumulator, t, index) => {
       const selectable = t.selected || (t.selectable && this.canSelectMore(selectedCount));
       const showCorrectAnswer = t.correct !== undefined && (t.selectable || t.selected);
 
-      if (isNewParagraph(t.text)) {
-        flushParagraph();
-        return;
-      }
+      if (t.text === '\n\n') return `${accumulator}</p><p>`;
 
-      if (isLineBreak(t.text)) {
-        currentChildren.push(<br key={`br-${index}`} />);
-        return;
-      }
+      if (t.text === '\n') return `${accumulator}<br>`;
 
       if (
         (selectable && !disabled) ||
         showCorrectAnswer ||
         t.selected ||
         t.isMissing ||
-        (animationsDisabled && t.predefined) // print mode
+        (animationsDisabled && t.predefined)
       ) {
-        currentChildren.push(
-          <Token
-            key={index}
-            disabled={disabled}
-            index={index}
-            {...t}
-            text={stripHtmlTags(t.text)}
-            selectable={selectable}
-            highlight={highlightChoices}
-            animationsDisabled={animationsDisabled}
-          />,
+        return (
+          accumulator +
+          renderToString(
+            <Token
+              key={index}
+              disabled={disabled}
+              index={index}
+              {...t}
+              text={normalizeSelectableText(t.text)}
+              selectable={selectable}
+              highlight={highlightChoices}
+              animationsDisabled={animationsDisabled}
+            />,
+          )
         );
-      } else {
-        // raw text node – React will escape as needed
-        currentChildren.push(<React.Fragment key={index}>{stripHtmlTags(t.text)}</React.Fragment>);
       }
-    });
 
-    // flush last paragraph
-    flushParagraph();
+      // Non-selectable: emit raw HTML unchanged (may contain partial tags, tables, lists, etc.)
+      return accumulator + normalizeCommonEntities(t.text);
+    };
 
-    return paragraphs;
+    return (tokens || []).reduce(reducer, '<p>') + '</p>';
   };
 
   render() {
     const { className: classNameProp } = this.props;
-    const nodes = this.generateTokensNodes();
+    const html = this.generateTokensInHtml();
 
+    // Render one invisible Token per visual variant so Emotion injects all CSS rules into the
+    // document before the browser paints the dangerouslySetInnerHTML content.
+    const primerText = ' ';
     return (
-      <StyledTokenSelect className={classNameProp} onClick={this.toggleToken}>
-        {nodes}
-      </StyledTokenSelect>
+      <>
+        <HiddenCssPrimer aria-hidden="true">
+          {/* base / selectable */}
+          <Token
+            text={primerText}
+            index={-1}
+            selectable
+            disabled={false}
+            highlight={false}
+            animationsDisabled={false}
+          />
+          {/* highlight */}
+          <Token text={primerText} index={-1} selectable disabled={false} highlight animationsDisabled={false} />
+          {/* selected */}
+          <Token
+            text={primerText}
+            index={-1}
+            selectable
+            selected
+            disabled={false}
+            highlight={false}
+            animationsDisabled={false}
+          />
+          {/* disabled + selected */}
+          <Token
+            text={primerText}
+            index={-1}
+            selectable
+            selected
+            disabled
+            highlight={false}
+            animationsDisabled={false}
+          />
+          {/* print / animationsDisabled */}
+          <Token
+            text={primerText}
+            index={-1}
+            selectable
+            disabled={false}
+            highlight={false}
+            animationsDisabled
+            predefined
+          />
+          {/* correct */}
+          <Token
+            text={primerText}
+            index={-1}
+            selectable
+            selected
+            correct
+            disabled={false}
+            highlight={false}
+            animationsDisabled={false}
+          />
+          {/* incorrect */}
+          <Token
+            text={primerText}
+            index={-1}
+            selectable
+            selected
+            correct={false}
+            disabled={false}
+            highlight={false}
+            animationsDisabled={false}
+          />
+          {/* missing */}
+          <Token text={primerText} index={-1} isMissing disabled={false} highlight={false} animationsDisabled={false} />
+        </HiddenCssPrimer>
+
+        <StyledTokenSelect
+          className={classNameProp}
+          onClick={this.toggleToken}
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+      </>
     );
   }
 }